Заливки

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

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;
}

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

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