SVG: заливка и обводка
В SVG заливка и обводка имеют много разных интересных опций, которые предоставляют возможности гораздо шире того, что есть в CSS.
Например, можно нарисовать SVG-паттерн и использовать его не только в заливке, но и в обводке. Заливке и обводке можно указывать разную прозрачность, также можно управлять пунктирной обводкой, на чем можно построить интересные анимированные эффекты.
В качестве заливки и обводки можно задавать none , цвета, ключевые слова ( currentColor и transparent ), а также градиенты и паттерны.
fill
Возможные значения: none , ключевые слова, цвета, паттерны и градиенты. Значение по умолчанию — black .
svg width="200" height="200"> defs> symbol id="s-rect"> rect width="70" height="70"/> symbol> linearGradient id="g-green" 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 width="200" height="200"> rect width="160" height="160" x="20" y="20" fill="none" stroke="yellowgreen"/> svg>stroke-width
svg width="200" height="200"> rect width="100" height="100" x="50" y="50" fill="none" stroke="gold" stroke-width="10"/> rect width="160" height="160" 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 width="300" height="160"> 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 width="270" height="270"> g class="g-circles" 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-opacity
Прозрачность обводки. Задаются значения от 0.0 до 1.0.
svg width="200" height="200"> g class="g-circles" 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
- Адаптивное видео с помощью встроенных математических функций CSS
- Недоступность в картинках
- Единицы размеров в CSS
- Генератор цветовых тем
- Jekyll → Gatsby
- Вариативные шрифты
- Размеры в SVG
- Адаптивный Pixel Perfect
- Логотип не отвечает или временно недоступен
- SVG-паттерны
- Мыльные пузыри на SVG
- SVG-градиенты
- Весёлая консолька
- SVG-маски
- Умная прокрутка со Scroll Snap Points
- CSS-анимации для ротации изображений
- Анимированные SVG-маски
- Странности обводки в SVG
- SVG-прелоадеры
- Анимируем градиенты ещё раз
- Background-blend-mode
- Возможности оформления SVG
- CSS и SVG маски
- Nth-child и nth-of-type
- SVG-иконки
- SVG: заливка и обводка
- SVG-path
- SVG: группировка и переиспользование элементов
- SVG-фигуры и трансформации
- SVG
- СSS-градиенты и 3D
- Рисовалка анимированных теней
- Свежие CSS-паттерны
- CSS-паттерны
- Радиальные градиенты
- Линейные градиенты
- Крестики-нолики на CSS
- Border-image
- Электронные часы на CSS и JS.
- Сколько весят селекторы?
- Символы юникода
- Свойство content
- Анимируем CSS-градиенты
- Текстовые эффекты
- Древовидный список на CSS
- Css-селекторы, часть 2
- Css-селекторы
- Контекст наложения
- Два способа «прошить» элемент по краю
- Box-sizing
- Цвета в CSS
- Фон под строчками: добавляем поля
- Box-shadow
- Css-фигуры: лепесток
- Transform
- Css Animation
- 3D-куб
- Border-radius
- First letter
- Эти глаза напротив
- CSS-фигуры
- Стрелки с помощью свойства border
- Flexbox
Страницы
Проекты
Стилизация SVG-графики
Продолжаем изучать SVG-графику, на этот раз коснемся стилизации.
Первая часть: Знакомство с SVG-графикой.
Изменение внешнего вида SVG-элементов аналогично HTML, с некоторыми особенностями. Например фон назначается свойством fill, а не background-color, граница — stroke вместо border. Если вы работали с Adobe Illustrator, подобная терминология будет знакома.
Согласно официальной спецификации SVG свойства могут быть добавлены непосредственно в теги. Например fill и stroke для элемента rect:
Также свойства можно добавлять как стиль. В примере к fill и stroke прибавилось CSS3 свойство transform:
Так как SVG основан на XML-разметке, то стиль в .svg-документе необходимо заключать в CDATA, иначе конструкция будет конфликтовать с XML-парсерами. В примере добавлен hover-эффект:
В .svg-документ внешние стили подключаются немного по другому:
SVG-элементы можно группировать с помощью тега g, тогда можно применять общие стили:
Вот и все основные моменты стилизации SVG. Бонусом немного полезного чтива: