Используем стили CSS
Немного о CSS внутри SVG-документа мы упомянули в статье о структуре файла.
Продолжим изучение темы при использовании стандартных стилей CSS.
Фон в SVG является прозрачным. Можно через CSS указать нужный фон.
Можно вынести свойства в отдельный блок style в html-документе.
#sample rect < fill: yellow; stroke: green; stroke-width: 4; transition: all 350ms; >#sample rect:hover При наведении мыши цвет изменится (мы определили :hover).
Можно сослаться на внешний CSS-файл.
Элементы SVG могут быть сгруппированы с помощью элемента , который можно использовать как контейнер с общими стилям для всех элементов в группе:
Рассмотрим практичный. Создадим цветочный орнамент.
Измените ширину браузера, чтобы увидеть изменения в SVG-картинке
Фигура состоит из множества элементов path, которым можно присвоить идентификатор id. А затем мы можем настроить нужный элемент через CSS (как внутри SVG, так и в HTML-документе).
Далее, мы можем дать другой цвет нужному элементу, например, нижнему левому фрагменту.
Также можем управлять видимостью элементов, используя медиа-запросы.
svg#flourish path < transition: .6s opacity; >@media screen and (max-width: 900px) < path#right-outer-flourish, path#left-outer-flourish < opacity: 0; >> Если теперь постепенно уменьшать ширину окна браузера, то можно заметить, как исчезают отдельные элементы орнамента.
Стили можно выносить не только в html-документ или отдельный файл, но и внутри самой SVG-разметки. В веб-документе указывать type не обязательно, но если SVG сохраняется в отдельном файле, то лучше его использовать, чтобы векторные редакторы правильно обрабатывали документ.
В этом примере стиль класса light переопределяет толщину обводки, заданную для фигур rect и circle.
SVG и CSS
На этой странице показано, как использовать CSS со специальным языком для создания графики: SVG (en-US) .
Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.
Общая информация: SVG
SVG (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.
SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.
Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.
Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.
| На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определённых браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com, либо в таблицах совместимости SVG element reference (en-US) , для информации о поддержке отдельных элементов.В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией Adobe.Более подробная информация о SVG в Mozilla, представлена на станице SVG (en-US) в этой wiki. |
|---|
За дело: Демонстрация SVG
Создайте новый документ SVG, как обычный текстовый файл, doc8.svg . Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> svg width="600px" height="600px" viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> title>SVG demonstrationtitle> desc>Mozilla CSS Getting Started - SVG demonstrationdesc> defs> g id="segment" class="segment"> path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> g> g id="quadrant"> use xlink:href="#segment"/> use xlink:href="#segment" transform="rotate(18)"/> use xlink:href="#segment" transform="rotate(36)"/> use xlink:href="#segment" transform="rotate(54)"/> use xlink:href="#segment" transform="rotate(72)"/> g> g id="petals"> use xlink:href="#quadrant"/> use xlink:href="#quadrant" transform="rotate(90)"/> use xlink:href="#quadrant" transform="rotate(180)"/> use xlink:href="#quadrant" transform="rotate(270)"/> g> radialGradient id="fade" cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> stop id="fade-stop-1" offset="33%"/> stop id="fade-stop-2" offset="95%"/> radialGradient> defs> text id="heading" x="-280" y="-270"> SVG demonstrationtext> text id="caption" x="-280" y="-250"> Move your mouse pointer over the flower.text> g id="flower"> circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> use id="outer-petals" xlink:href="#petals"/> use id="inner-petals" xlink:href="#petals" transform="rotate(9) scale(0.33)"/> g> svg> Создайте новый файл CSS, style8.css . копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:
/*** SVG demonstration ***/ /* page */ svg background-color: beige; > #heading font-size: 24px; font-weight: bold; > #caption font-size: 12px; > /* flower */ #flower:hover cursor: crosshair; > /* gradient */ #fade-stop-1 stop-color: blue; > #fade-stop-2 stop-color: white; > /* outer petals */ #outer-petals opacity: .75; > #outer-petals .segment-fill fill: azure; stroke: lightsteelblue; stroke-width: 1; > #outer-petals .segment-edge fill: none; stroke: deepskyblue; stroke-width: 3; > #outer-petals .segment:hover > .segment-fill fill: plum; stroke: none; > #outer-petals .segment:hover > .segment-edge stroke: slateblue; > /* inner petals */ #inner-petals .segment-fill fill: yellow; stroke: yellowgreen; stroke-width: 1; > #inner-petals .segment-edge fill: none; stroke: yellowgreen; stroke-width: 9; > #inner-petals .segment:hover > .segment-fill fill: darkseagreen; stroke: none; > #inner-petals .segment:hover > .segment-edge stroke: green; >
Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.
Эта wiki не поддерживает вставку SVG в страницы, поэтому мы не имеем возможности продемонстрировать это здесь. Изображение будет выглядеть так:
Примечания к демонстрации:
- Документ SVG привязывается к таблице стилей общепринятым способом.
- SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.
Что дальше?
В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: Данные XML
Found a content problem with this page?
This page was last modified on 5 дек. 2022 г. by MDN contributors.
Стилизация 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. Бонусом немного полезного чтива: