Svg цвет линий css

Заливка и обводка

Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.

Атрибуты заливки и обводки (Fill and Stroke Attributes)

Раскраска (Painting)

Основная раскраска может быть сделана установкой двух свойств на ноде — fill и stroke. Fill — устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML — названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.

rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> 

Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.

Примечание: Замечание: в Firefox 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение fill-opacity/stroke-opacity — будут применены оба.

Обводка (Stroke)

Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.

svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> svg> 

Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка — черным.

Второй атрибут, влияющий на обводку — свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображением концов линий.

Есть три возможных значения для stroke-linecap:

• butt обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
• square в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка — это половина заданного значения stroke-width.
• round задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.

Используйте stroke-linejoin , чтобы определить, как соединять обводку двух сегментов линии.

svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> svg> 

Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом stroke-linejoin . Есть три возможных значения для этого атрибута:

• miter продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.
• round создаёт закруглённый сегмент линии
• bevel создаёт новый угол для помощи в переходе между двумя сегментами

Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray .

svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> svg> 

В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.

Примечание: Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).

Первое число определяет длину штриха, второе — длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми «пикселями». Затем паттерн повторяется.

Также есть дополнительные stroke и fill свойства: fill-rule , которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit , which determines if a stroke should draw miters и stroke-dashoffset , который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)

Использование CSS (Using CSS)

В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill , stroke , stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width , height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.

Примечание: Спецификация SVG строго разделяет атрибуты на свойства и другие атрибуты. Первые могут быть изменены через CSS, а вторые — нет.

CSS может использоваться инлайн через атрибут style :

rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> 

или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе , как это делается в HTML, она включается в зону , предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.

svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> defs> style type="text/css"> ]]>style> defs> rect x="10" height="180" y="10" width="180" id="MyRect"/> svg> 

Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:

#MyRect:hover  stroke: black; fill: blue; > 

Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:

 svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> rect height="10" width="10" id="MyRect"/> svg> 

где style.css выглядит примерно так

#MyRect  fill: red; stroke: black; > 

Found a content problem with this page?

This page was last modified on 28 окт. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Контуры

У фигур могут быть контуры (или обводка). Контуры могут быть разных стилей. Изучим их. Контуры применимы к линиям, прямоугольника, кругам и т.д.

В качестве обводки можно задавать none, цвета (в т.ч. именованные), ключевые слова (currentColor и transparent), а также градиенты и паттерны.

Атрибут stroke

Атрибут stroke отвечает за цвет обводки. Значения по умолчанию нет.

Атрибут stroke-width

Толщина обводки, можно задавать в единицах длины или в процентах. Значение по умолчанию: 1.

stroke-opacity

Прозрачность обводки. Задаются значения от 0.0 до 1.0.

Атрибут stroke-linecap

Свойство определяет как будут выглядеть концы линий. Возможные значения: butt, round, square. Значение по умолчанию: butt.

Атрибут stroke-linejoin

Определяет как будут выглядеть соединения линий на углах. Возможные значения: miter, round, bevel. Значение по умолчанию: miter.

Атрибут stroke-dasharray

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray=»1″ нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.

Значения указываются в порядке dash и gap (пунктир и промежуток); безразмерные числа считаются пикселями. Хотя значения могут быть указаны любыми единицами измерения. Создадим линию:

А если три? Если задано странное значение, то оно будет повторяться, чтобы получился повторяющийся узор. Т.е. значение 5, 10, 5 будут описывать следующее: «черточка 5, разрыв 10, черточка 5, разрыв 5, черточка 10, разрыв 5»

Используя обводку и простые фигуры можно получить удивительные вещи:

Атрибут stroke-dashoffset

Атрибут stroke-dashoffset позволяет задать смещение пунктирной обводки относительно первоначального положения. Значение задается в единицах длины или в процентах, значения могут быть отрицательными. Значение по умолчанию: 0.

В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset:

Стили можно переносить в CSS:

Анимированные линии

SVG-линии при помощи CSS также можно заставить двигаться. Если значения stroke-dashoffset и stroke-dasharray равны и совпадают с длинной линии, то видимый конец линии можно заставить двигаться. Анимировать линию можно, изменяя во времени значение stroke-dashoffset до 0:

Контур в фигурах

Применим контур к прямоугольнику.

Контур рисуется посередине заданного пути. Если фигура прозрачна или рисуется на однородном поле, то смотрится нормально. Но если прямоугольник сделать цветным и меньшего размера чем viewBox, то можно увидеть, как в реальности рисуется контур.

Также можно анимировать контур у прямоугольника:

Как работает анимация в контурах

Рассмотрим подробнее, как работает анимация в контурах.

У вас есть SVG-файл. Он должен иметь элемент stroke. Контур должен быть пунктирным. Зададим нужное свойство через CSS. Длина пунктира должна быть достаточно большой.

Устанавливаем смещение контура через stroke-dashoffset. Подключаем анимацию, которая будет убирать смещение. Если установить достаточно большие значения для двух свойств у контура, то получим сплошной контур, который будет двигаться.

Значение forwards запустит анимацию один раз. Для бесконечной анимации применяем infinite.

Возьмём для опыта котёнка с замечательного сайта ikonka.ru.

В примере величина stroke-dasharray подбиралась на глазок. Чтобы не угадывать нужное значение, можно воспользоваться JavaScript.

 var path = document.querySelector('.path'); var length = path.getTotalLength(); 

Новогодняя ёлка

По такому же принципу работает и новогодняя ёлка. Для красоты мы её разукрасим в разные цвета. Праздник к нам приходит!

Источник

Как изменить цвет stroke в svg?

Oleg Urievich, вы пробовали добавить так свойство:
stroke: red !important; ?

У вас ведь stroke прописан как атрибут в path. Нужно его перезаписать, а при таком наследовании значение из атрибута имеет выше приоритет.

Ну или просто удалить этот атрибут вообще из разметки.

Рустам Байназаров, удалил stroke из исходного спрайта. Теперь могу его писать в CSS, но это все-же не хорошо

svg спрайт нужно встроить в html, файлом работать не будет, и через css просто менять параметр. Например:

Почему это в случае с файлом работать не будет? Будет спокойно через #use ссылкой на внешний файл в Chrome, Opera, Firefox, Safari и с недавних пор в Edge.

С полифилом будет работать во всех современных и не очень браузерах (ссылка на внешний файл).

И все CSS-свойства будут работать тоже со вставленным таким образом SVG.

Не надо ничего никуда встраивать, это не кешируется тогда.

Рустам Байназаров, даже с !important не работает. Могу изменять stroke только в самом спрайте. Так работает, через css не работает

Oleg Urievich, скиньте ссылку, где это не работает.

Или песочницу сделайте. Хотя там, вроде, запрет будет из-за кросс-доменной политики на внешние файлы через #use.

Только атрибут надо убрать из самого svg либо перебивать important’ом.

Источник