Фиксированная ширина хода в SVG

Я хотел бы иметь возможность установить ширину штриха на элементе SVG как "пиксельный", который всегда будет шириной 1px независимо от применяемых текущих преобразований масштабирования. Я знаю, что это может быть невозможно, так как вся точка SVG должна быть независимой от пикселя.

Ниже приведен контекст:

У меня есть элемент SVG с его атрибутами viewBox и preserveAspectRatio. Это выглядит примерно так.

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

Это означает, что когда я масштабирую этот элемент, фактические фигуры внутри него масштабируются соответственно (насколько это хорошо).

Как вы можете видеть, я создал viewBox так, чтобы начало координат находилось в центре. Я хотел бы нарисовать ось x и y в этом элементе, что я делаю так:

<line x1="-1000" x2="1000" y1="0" y2="0" />

Опять же, это прекрасно работает. В идеале, однако, эта ось всегда будет иметь ширину всего 1 пиксель. Я не заинтересован в том, чтобы оси становились толще, когда я масштабировал родительский элемент svg.

Так что я прикручен?

Ответы

Ответ 1

Вы можете использовать свойство vector-effect, установленное в non-scaling-stroke, см. документы. Другой способ - использовать transform(ref).

Это будет работать в браузерах, которые поддерживают эти части от SVG Tiny 1.2, например Opera 10. Резервная копия включает в себя запись небольшого script, чтобы сделать то же самое, в основном инвертируя CTM и применяя его к элементам, которые не должны масштаб.

Если вы хотите более четкие строки, вы также можете отключить сглаживание (shape-rendering=optimizeSpeed или shape-rendering=crispEdges) и/или играть с позиционированием.