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

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

Контекст наступний:

У мене є елемент SVG з набором атрибутів viewBox та збереженняАспектРаціо. Це виглядає приблизно так

<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) та / або грати з позиціонуванням.