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

18

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

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

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

Я использую его в качестве фона CSS на веб-странице. Не могу сбросить ширину хода: / ezakto
Я вообще не знаю библиотеку, но я думаю, что вы могли бы сделать именно это с RaphaelJS. Может быть стоит пойти? halfer
Каким образом вы его растягиваете - с помощью настольного приложения или какой-то библиотеки? Вы не можете сброситьstroke-width после трансформации? halfer

Ваш Ответ

1   ответ
23

В браузерах, которые реализуют 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 … />
IE9 не поддерживает немасштабирующий штрих. Я не знаю, поддерживает ли IE10 эту функцию.
Webkit это тоже поддерживает, смотритеbugs.webkit.org/show_bug.cgi?id=31438.

Похожие вопросы