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

Я хотел бы иметь возможность установить ширину штриха на элементе 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.

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

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

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

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