Оформление SVG-фигур / Толщина обводки [6/20]
×

Толщина обводки [6/20]

Для однопиксельной обводки достаточно задать только цвет в stroke. Если же нужно управлять толщиной обводки, это делается с помощью свойства stroke-width, также атрибутом или через CSS:

<circle r="60" cx="150" cy="50%" fill="none" stroke="orange"
stroke-width="5"></circle>

или:

circle {
  stroke: orange;
  stroke-width: 5;
}

Результат:

Короткой записи нет, поэтому цвет и толщина всегда задаются отдельно.

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

Если обводке задана толщина, но не задан цвет, обводка не отобразится.


Выполнить задание
HTML
<svg width="300" height="150"> <circle r="60" cx="75" cy="50%" fill="gold" stroke="darkorange"></circle> <circle class="shape-stroke-width" r="60" cx="225" cy="50%"></circle> </svg>
CSS
svg { border: 1px solid #dddddd; } .shape-stroke-width { fill: lightseagreen; stroke: teal; }
HTML Academy
  1. Задайте первой фигуре толщину обводки с помощью атрибута stroke-width="3".
  2. Задайте второй фигуре толщину обводки через CSS stroke-width: 5%.

Обратите внимание, что, в отличие от HTML, рамка не влияет на положение фигуры в пространстве или на её размеры.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #18, который стартует 7 августа.

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

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

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

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