• Теория
  • Теория

Заливки

В части про фигуры вы уже немного познакомились с возможностями оформления векторных фигур, теперь мы рассмотрим этот вопрос подробнее.

SVG-фигуры имеют богатые возможности оформления: им, как и HTML-элементам, можно задавать заливку цветом, градиентом или картинкой, но помимо этого также можно управлять отдельно прозрачностью заливки и обводки, а в качестве заливки можно использовать, например, текст.

Также интересные возможности имеет обводка. Например, можно управлять видом пунктирной обводки и сделать обводку точками, пунктиром или морзянкой, а ещё обводку можно сделать не только цветом, но также градиентом или картинкой.

Начнём с заливки. Если она не задана, по умолчанию фигура заполняется чёрным цветом:

<circle r="60" cx="150" cy="50%"></circle>

Цвет заливки задаётся атрибутом fill:

<circle r="60" cx="150" cy="50%" fill="gold"></circle>

либо аналогичным свойством в CSS:

circle {
  fill: gold;
}

Результат будет одинаковым:

Цвет можно задавать в любом удобном формате.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Оформление SVG-фигур» тренажёра «Внутреннее устройство SVG» можно после регистрации и оформления подписки.