Оформление 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, что может давать непредсказуемый результат.

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

Хотите писать JavaScript, используя современный синтаксис (ES2015, ES2016, ES2017)? Уметь тестировать свои программы? Записывайтесь на продвинутый интенсив по JavaScript.

Выполнить задание
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, уровень 2 #15, который стартует 24 сентября.

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

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

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

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