Lebar goresan tetap di SVG

Saya ingin dapat menyetel lebar goresan pada elemen SVG menjadi "peka-piksel", yang selalu lebar 1 piksel terlepas dari transformasi penskalaan saat ini yang diterapkan. Saya sadar bahwa ini mungkin tidak mungkin, karena inti dari SVG adalah tidak bergantung pada piksel.

Konteksnya sebagai berikut:

Saya memiliki elemen SVG dengan viewBox dan set atribut preservAspectRatio. Ini terlihat seperti ini

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

Ini berarti bahwa ketika saya menskalakan elemen itu, bentuk sebenarnya di dalamnya berskala sesuai (sejauh ini bagus).

Seperti yang Anda lihat, saya telah mengatur viewBox sehingga asalnya ada di tengah. Saya ingin menggambar sumbu x dan y di dalam elemen itu, yang saya lakukan sebagai berikut:

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

Sekali lagi, ini berfungsi dengan baik. Idealnya, lebar sumbu ini selalu hanya 1 piksel. Saya tidak tertarik pada sumbu yang semakin gemuk ketika saya menskalakan elemen induk svg.

Jadi apakah saya kacau?

Anda dapat menggunakan vector-effectproperti set ke non-scaling-stroke, lihat dokumen . Cara lain adalah dengan menggunakan transform(ref).

Itu akan bekerja di browser yang mendukung bagian-bagian itu dari SVG Tiny 1.2, misalnya Opera 10. Pengganti termasuk menulis skrip kecil untuk melakukan hal yang sama, pada dasarnya membalikkan CTM dan menerapkannya pada elemen yang seharusnya tidak diskalakan.

Jika Anda menginginkan garis yang lebih tajam, Anda juga dapat menonaktifkan antialiasing ( shape-rendering=optimizeSpeedatau shape-rendering=crispEdges) dan / atau bermain dengan pemosisian.