CSS: currentColor для svg — dr.Brain
Несколько дней назад Вы могли прочитать статью о использовании ключевого слова currentColor для создания расширяемых компонентов — “CSS: currentColor”. Однако, currentColor можно применять и для svg-изображений.
fill для SVG
Допустим, есть монохромное svg-изображение, и Вы хотите, чтобы оно было одинакового цвета с основным текстом.
Возьмем картинку с деревом ():
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
<path d="M14.755 14.006l-2.536-3.381h23.283a.531.531 0 0 0 .41-.869l-2.536-3.381h2.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h2.063l-2.55 3.4a.53.53 0 0 0 .425.85h2.063l-2.55 3.4a.53.53 0 0 0 .425.85h5.781v1.594c0 .293.238.531.531.531h3.125a.531.531 0 0 0 .531-.531v-1.594h5.782a.531.531 0 0 0 .41-.869z"/>
</svg>
Если атрибуты fill и stroke не определены, дерево будет черным (#000000) — это цвет по умолчанию.
Например, цвет текста на сайте “темно-угольный” (#272727), если Вы хотите, чтобы svg-изображение было такого же цвета, нужно задать соответствующее значение цвета для атрибута fill тега path:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
<path fill="#272727" d="M14.755 14.006l-2.536-3.381h23.283a.531.531 0 0 0 .41-.869l-2.536-3.381h2.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h2.063l-2.55 3.4a.53.53 0 0 0 .425.85h2.063l-2.55 3.4a.53.53 0 0 0 .425.85h5.781v1.594c0 .293.238.531.531.531h3.125a.531.531 0 0 0 .531-.531v-1.594h5.782a.531.531 0 0 0 .41-.869z"/>
</svg>
Динамический цвет для SVG
Вышеприведенный подход несомненно работает. Но как поступить, если возникнет необходимость добавить такую картинку в параграф с текстом другого цвета например, зеленого.
Это мой зеленый текст
В данном случае цвет текста #009900. Вам придется еще раз изменить значение параметра fill для изображения:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
<path fill="#009900" d="M14.755 14.006l-2.536-3.381h23.283a.531.531 0 0 0 .41-.869l-2.536-3.381h2.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h2.063l-2.55 3.4a.53.53 0 0 0 .425.85h2.063l-2.55 3.4a.53.53 0 0 0 .425.85h5.781v1.594c0 .293.238.531.531.531h3.125a.531.531 0 0 0 .531-.531v-1.594h5.782a.531.531 0 0 0 .41-.869z"/>
</svg>
Теперь картинка и текст одного цвета. А что делать, если это будет ссылка: при наведении цвета опять не будут совпадать.
Именно в таких случаях ключевое слово currentColor будет Вашим спасением. Его можно использовать в качестве значения атрибута fill: цвет svg-картинки будет соответствовать цвету текста:
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
<path fill="currentColor" d="M14.755 14.006l-2.536-3.381h23.283a.531.531 0 0 0 .41-.869l-2.536-3.381h2.063a.532.532 0 0 0 .415-.863L8.385.199a.53.53 0 0 0-.83 0l-4.25 5.313a.531.531 0 0 0 .415.863h2.063l-2.55 3.4a.53.53 0 0 0 .425.85h2.063l-2.55 3.4a.53.53 0 0 0 .425.85h5.781v1.594c0 .293.238.531.531.531h3.125a.531.531 0 0 0 .531-.531v-1.594h5.782a.531.531 0 0 0 .41-.869z"/>
</svg>
Это моя ссылка
</a>
Это очень хороший и, что важно, очень востребованный трюк.
Когда не нужно использовать currentColor
В некоторых случаях использование значения currentColor для атрибута fill неуместно. Например, если изображение является логотипом и должно сохранять свой специфический цвет независимо от контекста и действий, совершаемых на сайте.
Спасибо за внимание.
Как изменить цвет SVG картинки в CSS
Основная идея в том, что в файле svg доложен быть элемент с определенным ID, пример #my1
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
#my1{
fill: green;
}
</style>
<svg>
<use xlink:href="01.svg#my1"></use>
</svg>
</body>
</html><?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"> <g> <g> <path d="M497,123.271h-71.437V86.477c0-32.204-26.053-58.404-58.076-58.404h244.513c-32.023,0-58.076,26.2-58.076,58.404v36.796 h25c-8.284,0-15,6.716-15,15v61.563c0,8.284,6.716,15,15,15h27.735l6.456,191.327c0.707,20.955,9.343,40.525,24.315,55.108 c15.002,14.61,34.763,22.657,55.642,22.657h373.705c43.389,0,78.51-34.655,79.957-78.882l6.418-190.211h597 c8.284,0,15-6.716,15-15v-61.563C512,129.987,505.284,123.271,497,123.271z M116.437,86.477c0-15.662,12.595-28.404,28.076-28.404 h322.975c15.481,0,28.076,12.742,28.076,28.404v36.796h216.437V86.477z M442.826,404.049 c-0.915,27.969-22.866,49.878-49.974,49.878h219.147c-27.1,0-49.051-21.426-49.975-48.777L62.75,214.835h216.62 c6.703,27.336,31.277,47.672,60.496,47.672h42.27c20.928,0,51.317-20.315,59.939-47.672h217.137L442.826,404.049z M211.174,214.835h87.723c-7.459,10.246-20.505,17.672-26.762,17.672h-32.27C227.394,232.507,216.559,225.322,211.174,214.835z M482,184.835h40v-31.563h552V184.835z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
Возможности оформления SVG • Про CSS
Внешний вид SVG-элементам можно задавать как с помощью CSS, так и с помощью SVG-фильтров, градиентов и паттернов — их можно прописывать элементам прямо в коде либо задавать также через CSS.
Стили и скрипты можно задавать внутри SVG-файла, но если мы хотим, чтобы одно и то же изображение в разных условиях выглядело по-разному — стили внутри файла не годятся — нужно, чтобы векторное содержимое было доступно для внешних стилей.
Из всех способов вставки SVG для этого подходят всего два: иконочный шрифт или инлайновый SVG в HTML (удобнее всего делать это через use).
Какие стили оформления можно использовать для иконочных шрифтов?
Можно задать цвет, добавить тени и анимацию:
Не так уж и много, по сравнению с возможностями обычного SVG.
Для SVG-изображений можно использовать SVG-градиенты и фильтры, например, размытие или тени. Также можно использовать в качестве обводки и заливки паттерны и изображения, а ещё можно красить отдельные части картинок и таким образом получать разноцветные иконки.
При вставке SVG через use иконки становятся доступны для стилей страницы, и всеми этими прекрасными возможностями можно управлять через внешний CSS.
Вот пример иконок с паттернами в качестве фона:
Пример немного диковат, но он хорошо показывает, что фоном может быть любая картинка. Паттерны заданы в коде страницы и подключены с помощью CSS.
Вот код деревянного паттерна:
<pattern
patternUnits="userSpaceOnUse">
<image xlink:href="//img-fotki.yandex.ru/get/6447/5091629.86/0_74298_17a84446_L.jpg"
>
</pattern>В паттерн можно класть всё что угодно: комбинации фигур, объекты с градиентами, текст… Правда, есть подозрение, что сложные фоны могут плохо влиять на производительность страницы, но тестов не делала.
Подключаем паттерн:
.icons--wood {
fill: url(#wood);
}Чтобы при наведении менять местами обводку и заливку, нужно добавить ещё пару строчек:
.icons--wood {
fill: url(#wood);
}
.icons--wood .icon:hover {
fill: none;
stroke: url(#wood);
}Также можно делать интересные эффекты на основе обводки:
Обводки могут быть пунктирными, для них можно использовать градиент или паттерн.
.icons--stroke .icon {
stroke: rgba(0, 0, 0, .5);
stroke-width: 2;
&:hover {
stroke: skyblue;
}
}
.icons--dasharray .icon {
stroke: rgba(0, 0, 0, .5);
stroke-width: 2;
stroke-dasharray: 10 5;
fill: rgba(0, 0, 0, .1);
&:hover {
stroke-dasharray: 10 0;
}
}
.icons--gradient .icon {
stroke-width: 3;
stroke: url(#stripes);
}Иконкам в последней строке в качестве обводки задан градиент, уходящий в прозрачность, почему-то не работает в последней опере.
С анимацией пуктирной обводки можно делать интересные штуки:
Нажмите Rerun если демо застыло.
Не уверена, что эта анимация подходит для иконок (будет не очень хорошо, если иконки будут шевелиться или исчезать), но она может быть использована для эффектно появляющихся иллюстраций.
Примерный код:
path {
fill: none;
stroke: url(#stripes);
stroke-width: 2;
stroke-dasharray: 550 0;
animation: dasharray 5s infinite alternate;
}
@keyframes dasharray {
100% {
stroke-dasharray: 0 500;
}
}Следующий пример демонстрирует иконки с SVG-фильтрами:
Размытие, тень, повторяющийся контур и внутренняя тень (её не очень хорошо видно).
Конечно, размытие врядли подойдет для иконок, но с ним можно придумать разные другие интересные штуки.
У фильтров есть недостаток: результатом наложения фильтров является растровое изображение, из-за чего картинки утрачивают способность тянуться без потерь в качестве и хуже выглядят на экранах с ретиной.
UPD от 19 мая 2014: фильтры хорошо выглядят на ретине, при условии, что они задаются SVG-элементам, а не HTML. Прошу прощения за неточность.
В примере ниже SVG-изображение разделено на несколько путей, что дает возможность обращаться к ним поотдельности. Здесь это используется чтобы задать элементам разные цвета и задержки анимации. При этом в дальнейшем фигура (в данном случае это группа путей) может быть использована целиком — таким образом можно получить не только монохромные иконки, но и разноцветные. Правда, при вставке такого объекта через use в нем перестанет работать анимация, но раскраска сохранится.
В качестве заливки (или обводки) SVG-элементов удобно использовать сurrentColor. Это ключевое слово, обозначающее текущий цвет текста, и если задать его в качестве заливки (обводки) — элемент будет краситься вместе с окружающим текстом.
Задаем заливку:
.icon {
fill: currentColor;
}Если потом для родительского элемента задать цвет текста
фигура зальется этим же цветом. Очень удобно для ссылок по наведению и для страниц с несколькими темами оформления.
Пример:
Интересно, что в SVG можно использовать далеко не все CSS-свойства, относительно полный список можно найти вот тут.
Можно использовать animation, но transition работает странно и не во всех браузерах. CSS-градиенты использовать, к сожалению, нельзя. Трансформации работают.
Также перед использованием различных фильтров и эффектов нужно всегда проверять как они поддерживаются разными браузерами.
Из всего вышеизложенного можно сделать следующие выводы:
- самые широкие возможности для оформления дает инлайновый SVG;
- меньше возможностей, но более удобное подключение на страницу предоставляет иконочный шрифт. Существенный минус состоит в проблемах с поддержкой встраиваемых шрифтов в разных браузерах;
- если 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" stroke="blue" fill="purple"
fill-opacity="0.5" stroke-opacity="0.8"/>
Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.
Замечание: в Файрфокс 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение fill-opacity/stroke-opacity — будут применены оба.
Обводка (Stroke)
Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.
<?xml version="1.0" standalone="no"?> <svg 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, чтобы определить, как соединять обводку двух сегментов линии.
<?xml version="1.0" standalone="no"?>
<svg 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.
<?xml version="1.0" standalone="no"?>
<svg 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" y="10"/>
или может быть помещен в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <head>, как это делается в HTML, она включается в зону <defs>, предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style type="text/css"><![CDATA[
#MyRect {
stroke: black;
fill: red;
}
]]></style>
</defs>
<rect x="10" y="10"/>
</svg>Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:
#MyRect:hover {
stroke: black;
fill: blue;
}
Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:
<?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="style.css"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect/> </svg>
где style.css выглядит примерно так
#MyRect {
fill: red;
stroke: black;
}заливка и обводка • Про CSS
В SVG заливка и обводка имеют много разных интересных опций, которые предоставляют возможности гораздо шире того, что есть в CSS.
Например, можно нарисовать SVG-паттерн и использовать его не только в заливке, но и в обводке. Заливке и обводке можно указывать разную прозрачность, также можно управлять пунктирной обводкой, на чем можно построить интересные анимированные эффекты.
В качестве заливки и обводки можно задавать none, цвета, ключевые слова (currentColor и transparent), а также градиенты и паттерны.
fill
Заливка элемента.
Возможные значения: none, ключевые слова, цвета, паттерны и градиенты.
Значение по умолчанию — black.
<svg>
<defs>
<symbol>
<rect/>
</symbol>
<linearGradient
x1="0%" y1="0%"
x2="0%" y2="90%"
>
<stop offset="0%" stop-color="yellowgreen" />
<stop offset="90%" stop-color="green" />
</linearGradient>
</defs>
<use xlink:href="#s-rect"
x="20" y="20"
fill="hsla(348, 83%, 47%,.3)"/>
<use xlink:href="#s-rect"
x="110" y="20"
fill="rgb(255, 215, 0)"/>
<use xlink:href="#s-rect"
x="20" y="110"
fill="url(#g-green)"/>
<use xlink:href="#s-rect"
x="110" y="110"
fill="skyblue"/>
</svg>fill-rule
Свойство определяет как будут заливаться сложные фигуры, имеющие пересечения внутри себя. Для простых фигур ни на что не влияет.
Возможные значения: nonzero, evenodd
fill-rule="nonzero" интересно ведет себя для фигур из двух путей. Например, если внешний круг нарисован по часовой стрелке, а внутренний в обратном направлении, центральный круг останется без заливки (слева). Если же оба круга нарисованы в одном направлении — фигура зальется полностью (справа):
fill-opacity
Управление прозрачностью заливки. Можно задавать значения от 0.0 до 1.0 или в процентах. Правда, Firefox не любит значения в процентах для градиентов (пруфлинк, смотреть в FF).
<use xlink:href="#s-rect"
x="20" y="20"
fill="url(#g-red)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
x="50" y="50"
fill="hsl(50, 100%, 50%)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
x="80" y="80"
fill="url(#g-green)" fill-opacity=".5"/>
stroke
Цвет обводки. Значения по умолчанию нет.
<svg>
<rect x="20" y="20"
fill="none"
stroke="yellowgreen"/>
</svg>stroke-width
Толщина обводки, можно задавать в единицах длины или в процентах.
Значение по умолчанию: 1.
<svg>
<rect x="50" y="50"
fill="none" stroke="gold"
stroke-width="10"/>
<rect x="20" y="20"
fill="none" stroke="yellowgreen"
stroke-width="10%"/>
</svg>stroke-linecap
Свойство определяет как будут выглядеть концы линий.
Возможные значения: butt, round, square.
Значение по умолчанию: butt.
<use xlink:href="#s-path" stroke="orangered" y="20"
stroke-linecap="butt"/>
<use xlink:href="#s-path" stroke="olivedrab" y="85"
stroke-linecap="round"/>
<use xlink:href="#s-path" stroke="steelblue" y="150"
stroke-linecap="square"/>
stroke-linejoin
Определяет как будут выглядеть соединения линий на углах.
Возможные значения: miter, round, bevel.
Значение по умолчанию: miter.
<use xlink:href="#s-corner" stroke="orangered" y="0"
stroke-linejoin="miter"/>
<use xlink:href="#s-corner" stroke="olivedrab" y="80"
stroke-linejoin="round"/>
<use xlink:href="#s-corner" stroke="steelblue" y="160"
stroke-linejoin="bevel"/>
stroke-dasharray
Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах.
Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray="1" нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.
Примеры разных пунктирных линий:
<svg>
<path d="M 20 20 h 260"
stroke="purple" stroke-width="1"
stroke-dasharray="1" />
<path d="M 20 40 h 260"
stroke="mediumspringgreen" stroke-width="15"
stroke-dasharray="1 3" />
<path d="M 20 60 h 260"
stroke="orangered" stroke-width="1"
stroke-dasharray="5%" />
<path d="M 20 80 h 260"
stroke="green" stroke-width="1"
stroke-dasharray="1 5" />
<path d="M 20 100 h 260"
stroke="steelblue" stroke-width="1"
stroke-dasharray="2 7 6" />
<path d="M 20 120 h 260"
stroke="orange" stroke-width="5"
stroke-dasharray="5" />
<path d="M 20 140 h 260"
stroke="mediumseagreen" stroke-width="1"
stroke-dasharray="12% 5%" />
</svg>Используя обводку и простые фигуры можно получить удивительные вещи:
Также stroke-dasharray интересно сочетается с анимацией:
stroke-dashoffset
Свойство позволяет задать смещение пунктирной обводки относительно первоначального положения. Значение задается в единицах длины или в процентах, значения могут быть отрицательными.
Значение по умолчанию: 0.
В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset:
<svg>
<g fill="none"
stroke-width="15"
stroke-dasharray="25% 110%"
transform="rotate(72 135 135)">
<circle r="115" cx="135" cy="135"
stroke="crimson"/>
<circle r="115" cx="135" cy="135"
stroke="orangered"
stroke-dashoffset="25%"/>
<circle r="115" cx="135" cy="135"
stroke="gold"
stroke-dashoffset="50%"/>
</g>
</svg>Сочетая stroke-dashoffset и stroke-dasharray можно получить интересные эффекты.
Для полноценного просмотра воспользуйтесь браузерами на Webkit. Ссылка на полную версию.
Для перезапуска нажмите Rerun.
Несколько вдохновляющих ссылок про анимацию на stroke-dashoffset:
stroke-opacity
Прозрачность обводки. Задаются значения от 0.0 до 1.0.
<svg>
<g fill="none"
stroke-width="15">
<circle r="40" cx="60" cy="60"
stroke="crimson"
stroke-opacity=".7"/>
<circle r="55" cx="100" cy="100"
stroke="orangered"
stroke-opacity=".5" />
<circle r="40" cx="140" cy="140"
stroke="gold"
stroke-opacity=".25"/>
</g>
</svg>Анимация обводки позволяет получить совершенно удивительные вещи. Правда, я в своих примерах использовала CSS (и это демо не играет в Firefox) и SVG-анимацию, которая работает таки везде, но задается странно, длинно и неудобно. Думаю, что оптимальнее всего для анимации SVG использовать JavaScript-библиотеки.
CSS: currentColor для svg — dr.Brain
Несколько дней назад Вы могли прочитать статью о ключевом слове currentColor для создания расширяемых компонентов — «CSS: currentColor». Однако currentColor можно применять и для svg-изображений.
заливка для SVG
Допустим, есть монохромное svg-изображение, и Вы хотите, чтобы оно было одинакового цвета основным текстом.
Возьмем картинку с деревом ():
Если атрибуты заливка и штрих не, дерево будет черным (# 000000) — это цвет по умолчанию.
Например, цвет текста на сайте «темно-угольный» (# 272727), если Вы хотите, чтобы svg-изображение было такого же цвета, нужно задать соответствующее значение цвета для атрибута fill тега path :
Динамический цвет для SVG
Вышеприведенный подход несомненно работает. Как поступить, если возникла необходимость добавить такую картинку в параграф с текстом другого цвета например, зеленого.
Это мой зеленый текст
В данном случае цвет текста № 009900.Вам придется еще изменить значение параметра заливка для изображения:
Теперь картинка и текст одного цвета. А что делать, если это будет ссылка: при наведении цвета опять не будут совпадать.
Именно в таких случаях слово currentColor будет Вашим спасением. Его можно использовать в качестве значения атрибута fill : цвет svg-картинки будет соответствовать цвету текста:
Это моя ссылка
Это очень хороший и, что важно, очень востребованный трюк.
Когда не нужно использовать currentColor
В некоторых случаях значения использование currentColor для атрибута fill неуместно. Например, каким образом это должно быть определенно независимо от контекста и действий, совершаемых на сайте.
Спасибо за внимание.
.
Как изменить цвет SVG картинки в CSS
Основная идея в том, что в файле svg доложен быть элемент определенным ID , пример # my1
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style type="text/css"><![CDATA[
#MyRect {
stroke: black;
fill: red;
}
]]></style>
</defs>
<rect x="10" y="10"/>
</svg>
Добавить комментарий