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

Question

Я хотел бы иметь возможность установить ширину обводки элемента SVG, чтобы он учитывал пиксели и всегда имел ширину 1 пиксель независимо от применяемых текущих преобразований масштабирования. Я знаю, что это вполне может быть невозможно, поскольку весь смысл 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.

Так я облажался?

Answer 1

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

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

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