Chiều rộng nét cố định trong SVG

Tôi muốn có thể đặt chiều rộng nét vẽ trên một phần tử SVG là "pixel-nhận thức", luôn luôn có chiều rộng 1px bất kể các chuyển đổi tỷ lệ hiện tại được áp dụng. Tôi biết rằng điều này có thể là không thể, vì toàn bộ điểm của SVG là độc lập với pixel.

Bối cảnh như sau:

Tôi có một phần tử SVG với bộ thuộc tính viewBox và keepAspectRatio của nó. Nó trông giống như thế này

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

Điều này có nghĩa là khi tôi chia tỷ lệ phần tử đó, các hình dạng thực tế bên trong nó sẽ thay đổi tỷ lệ tương ứng (cho đến nay vẫn tốt).

Như bạn có thể thấy, tôi đã thiết lập viewBox để điểm gốc nằm ở trung tâm. Tôi muốn vẽ một trục x- và y bên trong phần tử đó, tôi làm như vậy:

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

Một lần nữa, điều này hoạt động tốt. Tuy nhiên, lý tưởng nhất là trục này sẽ luôn chỉ rộng 1px. Tôi không quan tâm đến việc các trục trở nên béo hơn khi tôi chia tỷ lệ phần tử svg mẹ.

Vậy tôi có bị làm sao không?

Bạn có thể sử dụng bộ thuộc vector-effecttính để non-scaling-strokexem tài liệu . Một cách khác là sử dụng transform(ref).

Điều đó sẽ hoạt động trong các trình duyệt hỗ trợ các phần đó từ SVG Tiny 1.2, chẳng hạn như Opera 10. Dự phòng bao gồm việc viết một tập lệnh nhỏ để làm điều tương tự, về cơ bản là đảo ngược CTM và áp dụng nó trên các phần tử không nên mở rộng quy mô.

Nếu bạn muốn các đường nét hơn, bạn cũng có thể tắt khử răng cưa ( shape-rendering=optimizeSpeedhoặc shape-rendering=crispEdges) và / hoặc chơi với định vị.