Заливка и обводка — SVG
Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.
Раскраска (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.
Замечание: в Firefox 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 для стилизации заливки и обводки. Не все атрибуты могут быть установлены через 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-библиотеки.
Нативный способ покрасить SVG-иконки / Блог компании TINKOFF / Хабр
Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.
Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.
Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.
Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.
Чем нам полезен USE?
Этот тэг задуман для переиспользования символов и целых SVG-блоков на странице. Но в современных браузерах (прости, IE) он может даже доставать внешние ресурсы!
Внешние SVG должны быть на том же домене, так что CDN не подойдет. Пока.
Это позволяет нативным образом вставить SVG в Shadow DOM, почти как тэг IMG с атрибутом src, только с возможностью использовать CSS. И оно даже само работает с кэшем! Но нужно слегка подготовить иконки. Вот что надо сделать:
Сначала в каждой иконке нужно сделать символ с уникальным id и переместить viewBox в него.
Затем надо назначить fill (или stroke) на currentColor, чтобы потом использовать CSS-правило color для задания цвета. Можно также задать эти атрибуты в inherit на других элементах, что позволит сделать двухцветные иконки (подробнее — в примере ниже).
Когда наши иконки подготовлены, остается только скинуть их в папку assets и использовать:
Компонент именованных иконок для Angular
Писать путь и обращаться к символу каждый раз утомительно. Давайте сделаем Angular-компонент, который будет находить иконки по имени. С помощью Dependency Injection это сделать очень просто.
Нам понадобится токен для предоставления пути до всех наших иконок и простой компонент. Он будет формировать href исходя из имени и заданного пути. Мы даже можем повесить его на нативный SVG с помощью селектора: так мы вынесем наружу заботу о размере.
Надо иметь в виду, что Safari до 12.1 поддерживает только устаревший синтаксис
xlink:href. Так что лучше использовать оба варианта.
Сделаем stroke и fill прозрачными для использования нескольких цветов в CSS:
Живой пример: stackblitz.com/edit/angular-colored-svg
Заключение
У этого подхода есть ограничения — отсутствие поддержки IE и кросс-доменности. Однако, если они для вас не критичны, данное решение может стать хорошей альтернативой другим способам.
Вам не придется включать иконки в бандл приложения или скачивать их запросами. Вы можете положиться на кэш для ускорения загрузки, а отсутствие DOM-операций делает этот подход быстрее и безопаснее ручной вставки исходников. Всем ярких решений!
Практическое руководство о SVG в вебе
Подготовка SVG для использования в вебе это очень простой процесс, не сложнее экспорта JPEG или PNG. Используйте любой привычный для вас графический редактор (Illustrator, Sketch, Inkscape [бесплатен], и тому подобное [или даже Photoshop, если вы используете слои с формами]) с тем размером изображения, который вы планируете использовать. Обычно я работаю в Иллюстраторе, поэтому я объясню некоторые способы подготовки файлов в этой программе, но вообще они применимы и для любой другой программы. Вам, возможно, стоит перевести текст в кривые, поскольку шрифт, скорее всего, будет неправильно отображаться, если, конечно, вы не планируете стилизовать их с помощью веб-шрифта, используемого на странице (что возможно!). Не стоит также превращать все объекты в единые формы, особенно если у вас есть обводка, которой необходимо будет управлять на странице, тем более преобразование объектов зачастую не уменьшает размер файла. Любые имена, присвоенные группам или слоям, будут добавлены к SVG как ID элемента. Это довольно удобно для стилизации, но немного увеличит общий размер файла.
Перед тем как сделать экспорт, необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px). В противном случае скорее всего изображению не будет хватать чёткости и часть изображения обрежется. В Иллюстраторе это можно сделать следующим образом: Object > Artboards > Fit to Artwork Bounds. Затем жмём save as и выбираем SVG, и оставляем настройки по умолчанию. Здесь можно сделать небольшую оптимизацию, но на самом деле не стоит, так как далее мы будем применять разные улучшающие приёмы, поэтому сейчас мы не будем тратить впустую время на эти настройки.
Приёмы для уменьшения размеров файла.
(Смотрите ресурсы по оптимизации)
Существует множество статей по оптимизации SVG, предлагающих кладезь знаний в этой теме, но я хочу поделиться парой приёмов, которые считаю наиболее эффективными и полезными. Они не требуют много усилий и могут легко вписаться в рабочий процесс.
Чтобы добиться наименьшего размера SVG, логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки SVG это SVGO. Она удаляет весь не нужный код. Но! Будьте внимательны используя эту программу, если планируете управлять SVG при помощи CSS / JS, так как она может слишком сильно почистить код, что затруднит дальнейшие изменения. Удобство SVGO ещё и в том, что её можно включить в процесс автоматической сборки проекта, но можно также использовать GUI если хочется.
Разбираясь подробнее с правильным удалением всего ненужного, мы можем сделать ещё кое-что в графическом редакторе. Сперва нужно убедиться, что используется настолько мало контуров/форм, насколько это возможно, так же как и точек на этих контурах. Можно объединять и упрощать всё, что поддаётся упрощению, и удалить все ненужные точки. В Иллюстраторе есть плагин VectorScribe с инструментом Smart Remove Brush Tool, который поможет удалить точки и при этом оставить общую форму той же.
Предварительная оптимизация
Smart Remove Brush Tool удалил точки
Дальше будем увеличивать изображение. В Иллюстраторе удобно включить просмотр с пиксельной сеткой View > Pixel Preview и проверить, как располагаются контуры. Чтобы разместить контуры по сетке, потребуется немного времени, но эти усилия окупятся и позволят добиться более чёткого рендеринга (лучше обратить на это внимание заранее).
Точки вне сетки
Выравнивание по сетке
Если есть два и более объекта для выравнивания, то стоит удалить все ненужные перекрытия. Иногда даже если контуры тщательно выровнены, может быть видна тонкая белая линия. Чтобы предотвратить такое, можно немного наложить объекты друг на друга в местах перекрытия. Важно: в SVG z-index имеет определённый порядок, который зависит от объекта, находящегося снизу, поэтому стоит поместить верхний объект в нижнюю часть файла в коде.
И, наконец, последнее, но немаловажное, то, о чём обычно забывают — это активировать gzip сжатие SVG на вашем сайте в .htaccess файле.
AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "image/svg+xml" \
"text/css" \
"text/html" \
"text/javascript"
... etc
</IfModule>
</IfModule>В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO.
Оригинал: 1,413b
После оптимизации: 409b
В итоге размер файла стал меньше на ~71% (и на ~83% при сжатии)
Дополнение: Rob Sterlini заметил, поскольку «b» повторяется, можно использовать элемент <use>, для повторения, что ещё больше уменьшит размер файла — и был абсолютно прав.
После оптимизации с использованием <use>: 311b
Размер файла стал меньше на ~78%
Если применить эту технику ко всем файлам SVG, это значительно улучшит ваш сайт.
css — простой способ изменить цвет для изображения SVG?
Вы можете сделать это легко, добавив встроенный SVG, просто откройте SVG в редакторе кода / текста и скопируйте и вставьте код в файл редактора кода. Затем вы можете использовать fill: color; для адресации цвета в SVG.
Вы можете оптимизировать SVG, используя, например, этот редактор SVG.
Использование ширины : 100%; Высота и : авто; позволит SVG заполнить контейнер, в котором он находится.
Пример ниже.
.animal-svg {
ширина: 192 пикс;
}
.animal-svg svg {
маржа: 0;
ширина: 100%;
высота: авто;
заливка: красный;
}
Если вы действительно не хотите использовать встроенный SVG, вы можете использовать этот ответ из другого вопроса: Как изменить цвет изображения SVG с помощью CSS (замена изображения SVG jQuery)?
ИЗМЕНИТЬ
См. Пример ниже, встроенный стиль (как в вашем комментарии) отменяется CSS (.животное-svg svg .st0 ).
.animal-svg {
ширина: 192 пикс;
}
.animal-svg svg {
маржа: 0;
ширина: 100%;
высота: авто;
заливка: красный;
}
.animal-svg svg .st0 {
заливка: красный;
}
Изменить цвет встроенного SVG с помощью CSS
Работая над оптимизацией некоторых из моих веб-сайтов для повышения скорости, я решил использовать встроенные изображения SVG вместо значков шрифтов, таких как Font Awesome.Однако это привело к поиску возможности изменить цвет встроенного SVG. Здесь я документирую, как добиться такого изменения цвета SVG с помощью CSS.
Значки шрифтов, такие как Font Awesome, великолепны, и они предоставляют огромное количество готовых к использованию и масштабируемых форм, которые можно легко использовать на веб-странице, однако наличие такого количества фигур имеет обратную сторону по размеру и, следовательно, к скорости сайта. Хотя существуют такие инструменты, как приложение icomoon, которые могут создавать настраиваемый набор из этих значков шрифтов, я решил пойти со встроенным SVG-подходом, так как считаю его более гибким в долгосрочной перспективе.
Создание SVG из значков шрифтов
Если вам интересно, как сгенерировать эти SVG для использования в строке из значка шрифта, позвольте мне сказать вам, что это довольно просто сделать с помощью приложения icomoon. Вы можете просто выбрать значок, который хотите преобразовать в SVG с помощью приложения icomoon, и нажать «Создать SVG» внизу.
Встроенный SVG цвет
Когда вы используете встроенный SVG вместо значка шрифта, вам может потребоваться изменить цвет этих фигур, чтобы он соответствовал тексту.Чтобы иметь возможность изменять цвета с помощью CSS, мы собираемся использовать формы, определенные с помощью простого пути. Получив это, мы можем просто использовать свойство CSS «fill», чтобы изменить их цвет, как показано в коде ниже.
svg {
заполнить: # 27ae60;
} Вы можете найти полную демонстрацию в следующем коде. Иконки SVG, которые я использовал здесь, созданы из иконок Font Awesome.
Просмотрите фигуры Pen SVG с заливкой с помощью CSS, автор — Канишк Кунал на CodePen.0
Если вы используете программу чтения RSS-каналов или по какой-либо причине вставка, указанная выше, не отображается, посетите страницу Pen live на CodePen
.
Inline SVG и иконочные шрифты
Прежде чем я закончу этот пост, я хотел бы указать вам на следующие две статьи, которые помогут вам выбрать между встроенными шрифтами SVG и Icon для ваших собственных проектов.
Встроенный SVG и иконочные шрифты
Почему и как я отказался от шрифтов со значками в пользу встроенного SVG
Цвет для значков и элементов SVG с currentColor
Создание многоразовых значков SVG и согласованной цветовой темы для компонентов при сохранении коротких таблиц стилей теперь возможно с currentColor — переменной CSS Module 3. Но что такое currentColor ? И как добиться согласованности цвета и создать с его помощью многоразовые значки SVG?
Давайте узнаем.
Что такое
currentColor ?
currentColor — это переменная CSS, которая содержит вычисленное значение ближайшего свойства color , используемого в элементе.
Короче говоря, значение
currentColor= значение свойства closetcolor.
currentColor — это , а не как настраиваемая переменная, и его значение — только для чтения ; следовательно, мы не можем переопределить или присвоить ему значение.
Например, чтобы присвоить currentColor значение blue :
h2 {
currentColor: синий;
}
h2 {
цвет синий;
}
Мы можем сопоставить значение currentColor любому свойству, которое может получать цвет. Давайте посмотрим на следующий пример:
Тень моего блока должна быть синей
Предположим, у нас уже есть цвет из h2 установлен на синий .Мы можем назначить значение цвета границы на currentColor , как показано ниже:
.blue-border {
граница: сплошная 1px currentColor;
}
Когда мы добавляем blue-border к h2 element
Моя граница должна быть синей
Результат будет:
Граница теперь того же цвета, что и текст. Просто как тот.
Следующий вопрос — что, если мы не зададим цвет текста для h2 , как currentColor подберет правильный цвет?
Наследование цвета с ключевым словом
currentColor
Как и другие переменные CSS, он следует правилу каскадирования, что означает, что если в наборе правил CSS элемента не существует свойства color , он унаследует свойство color от ближайшего предка компонента.Если в каком-либо предке нет color , currentColor автоматически получит резервное значение, определенное браузером, которое, скорее всего, является черным.
Возьмем следующую древовидную структуру DOM, например:
, в котором элемент div # section имеет фиолетовый цвет с классом purple , элемент div # box-wrapper имеет класс green , а наш целевой элемент div # box-1 имеет синий класс по цвету.Для экспериментов мы добавляем следующее к любому элементу с классом box (включая наш целевой элемент)
фон: currentColor;
Ниже описывается, как наследование цвета работает для currentColor для элемента div # box-1 и div # box-2 в соответствии со структурой выше
Более подробная схема объяснения приведена ниже:
Но не всем свойствам действительно нужен доступ к currentColor .Хотя некоторые из них могут унаследовать значение , цвет , некоторым другим свойствам требуется помощь, чтобы получить правильный цвет. Для таких свойств очень полезен currentColor .
Итак, какое свойство не требует помощи currentColor , а какое -?
Наследование цвета в CSS
Многие свойства CSS имеют по умолчанию наследование цвета, в том числе:
-
цвет рамки -
граница -
контурицвет контурадля текстового элемента -
цвет -
тень коробки
Кроме того, все текстовые элементы, включая текст изображения alt , будут наследовать значение цвета, если им явно не назначен другой цвет.
Возьмем, например, следующее:
- Элемент списка 1
- Элемент списка 2
- Элемент списка 3
При изменении цвета родительского блока div , цвет всех связанных свойств и текстовых элементов также изменяется.
Для описанных выше сценариев нет необходимости использовать currentColor . В противном случае currentColor необходим для включения наследования цвета между элементами, например для создания тем и создания согласованных значков SVG.
Давайте посмотрим на эти варианты использования, не так ли?
Создайте компонент многоразового значка с SVG и
currentColor
Использование SVG для значков является рекомендуемой практикой по многим веским причинам. И есть много подходов к созданию многоразового компонента значка SVG. Простой метод — создать SVG-спрайт с , используя и символов элементов.
Создание спрайтов SVG с использованием
Самый простой — создать контейнер для значков, используя в качестве спрайта элемент .Мы оборачиваем каждый значок и повторно используем его с , используя . — это вложенный элемент SVG, который позволяет нам определять значок, не отображая его на экране. Только когда есть ссылка на этот значок с использованием элемента . Рассмотрим, например, следующий контейнер спрайтов значков SVG:
<тело>
Добавить комментарий