Подтвердить что ты не робот

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

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

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

Возможные? Что-то вроде "тонких" линий во флеше.

4b9b3361

Ответ 1

В браузерах, реализующих SVG 1.2T, вы можете иметь немасштабирующий штрих Opera и Webkit поддерживают это, как Firefox от версии 15.

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

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