Используем стили CSS

Немного о CSS внутри SVG-документа мы упомянули в статье о структуре файла.

Продолжим изучение темы при использовании стандартных стилей CSS.

Фон в SVG является прозрачным. Можно через CSS указать нужный фон.


svg { 
    background: #fcedd6; 
}

Можно вынести свойства в отдельный блок style в html-документе.


<style>
#sample rect {
	fill: yellow;
	stroke: green;
	stroke-width: 4;
	transition: all 350ms;
}

#sample rect:hover {
	fill: magenta;
}
</style>

<svg id="sample" xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
    <rect x="4" y="4" width="190" height="90" />
</svg>

При наведении мыши цвет изменится (мы определили :hover).

Можно сослаться на внешний CSS-файл.


<?xml-stylesheet type="text/css" href="style.css"?>

Элементы SVG могут быть сгруппированы с помощью элемента <g>, который можно использовать как контейнер с общими стилям для всех элементов в группе:


<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
<g style="fill:red; stroke:blue; stroke-width:4; fill-opacity: 0.5;">
	<rect x="90" y="5" width="100" height="80"/>
	<circle cx="70" cy="50" r="44"/>
</g>
</svg>

Рассмотрим практичный. Создадим цветочный орнамент.

Измените ширину браузера, чтобы увидеть изменения в SVG-картинке

Фигура состоит из множества элементов path, которым можно присвоить идентификатор id. А затем мы можем настроить нужный элемент через CSS (как внутри SVG, так и в HTML-документе).

Далее, мы можем дать другой цвет нужному элементу, например, нижнему левому фрагменту.


path#left-outer-flourish {
	opacity: 0.6;
	fill: #f00;
}

Также можем управлять видимостью элементов, используя медиа-запросы.


svg#flourish path {
	transition: .6s opacity;

}

@media screen and (max-width: 900px)  {
	path#right-outer-flourish, path#left-outer-flourish { 
		opacity: 0;
	}
}

Если теперь постепенно уменьшать ширину окна браузера, то можно заметить, как исчезают отдельные элементы орнамента.

Источник: the new code – Create Adaptive SVG Illustrations With CSS

Стили можно выносить не только в html-документ или отдельный файл, но и внутри самой SVG-разметки. В веб-документе указывать type не обязательно, но если SVG сохраняется в отдельном файле, то лучше его использовать, чтобы векторные редакторы правильно обрабатывали документ.


<svg height="320px" width="140px" >
    <title>Светофор</title>
    <style type="text/css">
        rect, circle {
            stroke: black;
            stroke-width: 3;
        }
        .light {
            stroke-width: 2;
        }
    </style>

    <rect x="20" y="20" width="100" height="280" style="fill:blue;" />
    <g>
        <circle class="light" style="fill:red" cx="70" cy="80" r="30" />
        <circle class="light" style="fill:yellow" cx="70" cy="160" r="30" />
        <circle class="light" style="fill:#40CC40" cx="70" cy="240" r="30" />
    </g>
</svg>
Светофор

В этом примере стиль класса light переопределяет толщину обводки, заданную для фигур rect и circle.

Дополнительное чтение

Управление контурами через CSS

Вернуться в раздел SVG

Реклама