Оформление SVG-фигур / Заливки [1/20]
×

Заливки [1/20]

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

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

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

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


Выполнить задание
HTML
<svg width="300" height="150"> <circle r="60" cx="75" cy="50%"></circle> <circle r="60" cx="150" cy="50%"></circle> <circle class="shape-fill" r="60" cx="225" cy="50%"></circle> </svg>
CSS
svg { border: 1px solid #dddddd; } .shape-fill { }
HTML Academy
  1. Первой фигуре задайте заливку атрибутом в формате HEX fill="#ff7700"
  2. Второй — атрибутом в формате HSLA fill="hsla(50, 100%, 50%, 0.75)"
  3. Третьей фигуре задайте заливку именованным цветом fill: yellowgreen в редакторе CSS.
Теория Проверить Следующее задание

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.