Страницы

Поиск по вопросам

понедельник, 8 апреля 2019 г.

Тайна вырезания контура в фигуре SVG

Есть две версии иконки SVG. На одной стрелка вырезается, а на второй - нет, хотя технологически всё верно. Почему не вырезается во второй и как исправить?
svg {width: 120px;}

Иконка №1:

Иконка №2:



Ответ

По умолчанию правило SVG - fill-rule принимает значение равное nonzero В патче иконки два подпути (начинаются с команды M) - первый рисует облако, второй подпуть стрелку. При правиле fill-rule="nonzero", где будет закрашенная область, а где "дырка" - зависит от взаимного направления подпутей. Подробнее на русском о правиле fill-rule здесь В первой иконке в вопросе автора, два подпути идут навстречу друг другу, поэтому внутренняя область стрелки будет незакрашена см. Рис.2 Сделал для наглядности пример анимации: подпуть рисующий облако движется против часовой стрелки. Подпуть стрелки - по часовой.
Анимация начинается при клике.
Cloud Arrow Click me

Комментариев нет:

Отправить комментарий