Нарисуйте линию, которая не становится толще при растяжении изображения

Question

Есть ли способ в 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> 

(Диагональная линия). Я растягиваю это изображение через прямоугольный элемент, и когда элемент больше, линия становится толще, но мне нужна всегда тонкая линия.

Возможно? Что-то вроде «тонких» линий во вспышке.

Answer 1

В браузерах, которые реализуют SVG 1.2T вы можете иметь non-scaling stroke Opera и Webkit поддержки этого как и Firefox, начиная с версии 15.

<!-- via property --> 
<line … vector-effect="non-scaling-stroke" /> 

<!-- via CSS --> 
<style> 
    line { vector-effect:non-scaling-stroke } 
</style> 
<line … />