Оформление SVG-фигур / Пунктирные линии, часть 1 [12/20]
×

Пунктирные линии, часть 1 [12/20]

В SVG можно управлять видом пунктирных линий, это делается с помощью свойства stroke-dasharray. В качестве значения задаётся длина отрезков и пробелов между ними. Можно задать одно число, в этом случае получится пунктирная линия, состоящая из отрезков и пробелов одинаковой длины:

1. stroke-dasharray="15":

2. Если задать два числа stroke-dasharray="50 10", первое будет управлять длиной отрезков, второе — длиной пробелов:

3. Последовательность можно продолжить stroke-dasharray="1 2 3 5 8 13 21", в этом случае получится пунктирная линяя со сложным ритмом:

Аналогично работает CSS-свойство stroke-dasharray.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<svg width="300" height="200"> <line x1="40" y1="50" x2="260" y2="50" stroke-width="10" stroke="tomato"></line> <line x1="40" y1="100" x2="260" y2="100" stroke-width="20" stroke="gold"></line> <line class="shape-dasharray" x1="40" y1="150" x2="260" y2="150" stroke-width="20" stroke="lightseagreen"></line> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. Задайте первой линии атрибут stroke-dasharray="10",
  2. а второй линии — со значением 50 15.
  3. В CSS третьей линии задайте свойство stroke-dasharray со значением 5 10 15 20.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый JavaScript #3, который стартует 26 сентября.

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

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

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

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