Фиксированная ширина обводки в 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>

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

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

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

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

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

1 81
svg google-visualization

1 ответ:

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

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

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

102