在SVG中有一种方法来绘制一个在图像被拉伸时保持薄的线条吗?
我使用SVG图像作为CSS背景,像这样:
<svg ... preserveAspectRatio="none" viewBox="0 0 15 15"> <line x1="0" y1="15" x2="15" y2="0" color="#000" stroke="#333" stroke-width="1" /> </svg>
(对角线)。我通过矩形元素拉伸这个图像,当元素较大时,线条变厚,但是我需要一条细线条。
可能?闪光灯中的“瘦”线条。
解决方法
在实现SVG 1.2T的浏览器中,您可以使用
non-scaling stroke Opera和Webkit来支持这一点,就像版本15中的Firefox一样。
<!-- via property --> <line … vector-effect="non-scaling-stroke" /> <!-- via CSS --> <style> line { vector-effect:non-scaling-stroke } </style> <line … />