Есть две версии иконки SVG. На одной стрелка вырезается, а на второй - нет, хотя технологически всё верно. Почему не вырезается во второй и как исправить?
svg {width: 120px;}
Иконка №1:
Иконка №2:
Ответ
По умолчанию правило SVG - fill-rule принимает значение равное nonzero
В патче иконки два подпути (начинаются с команды M) - первый рисует облако, второй подпуть стрелку.
При правиле fill-rule="nonzero", где будет закрашенная область, а где "дырка" - зависит от взаимного направления подпутей.
Подробнее на русском о правиле fill-rule здесь
В первой иконке в вопросе автора, два подпути идут навстречу друг другу, поэтому внутренняя область стрелки будет незакрашена см. Рис.2
Сделал для наглядности пример анимации: подпуть рисующий облако движется против часовой стрелки. Подпуть стрелки - по часовой.
Анимация начинается при клике.
Комментариев нет:
Отправить комментарий