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

Question

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

svg {width: 120px;}

<p>Иконка №1:</p>
<svg x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;">
<path d="M104.1,52.9c0.1-0.8,0.1-1.5,0.1-2.3c0-16.9-13.7-30.6-30.6-30.6c-10.3,0-19.4,5.1-25,12.9
 c-1.7-0.4-3.5-0.6-5.3-0.6c-11.8,0-21.6,8.4-23.8,19.6c-4.7,0.9-8.9,3.3-12.2,6.5C2.8,62.8,0,68.9,0,75.7C0,89.1,10.9,100,24.3,100
 h71.5c13.4,0,24.3-10.9,24.3-24.3C120,65.3,113.4,56.4,104.1,52.9z M69.1,59.2c0,26.3,0,0,0,26.3c-10.7,0-2.9,0-15.5,0
 c0-26.3,0,0,0-26.3c-8.9,0,0,0-8.9,0c16.6-16.6,0,0,16.6-16.6c16.6,16.6,0,0,16.6,16.6C69.1,59.2,78,59.2,69.1,59.2z"/>
</svg>
<p>Иконка №2:</p>
<svg x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;">
<path d="M104.1,52.9c0.1-0.8,0.1-1.5,0.1-2.3c0-16.9-13.7-30.6-30.6-30.6c-10.3,0-19.4,5.1-25,12.9
 c-1.7-0.4-3.5-0.6-5.3-0.6c-11.8,0-21.6,8.4-23.8,19.6c-4.7,0.9-8.9,3.3-12.2,6.5C2.8,62.8,0,68.9,0,75.7C0,89.1,10.9,100,24.3,100
 h71.5c13.4,0,24.3-10.9,24.3-24.3C120,65.3,113.4,56.4,104.1,52.9z M69.1,85.4 69.1,59.2 78,59.2 61.3,42.5 44.7,59.2 53.6,59.2 53.6,85.4z"/>
</svg>

О, тебя разбанили :) – Qwertiy May 12 '17 at 16:49 — Qwertiy, May 12 '17 at 16:49
@Qwertiy, так уже лет триста назад :) – Yuri May 12 '17 at 16:52 — Yuri, May 12 '17 at 16:52

score 6 · Answer 1 · answered May 12 '17 at 16:47

Решается добавлением fill-rule: evenodd в стили или атрибуты тега path:

svg {width: 120px;}
#second path { fill-rule: evenodd; }

<p>Иконка №1:</p>
<svg x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;">
<path d="M104.1,52.9c0.1-0.8,0.1-1.5,0.1-2.3c0-16.9-13.7-30.6-30.6-30.6c-10.3,0-19.4,5.1-25,12.9
 c-1.7-0.4-3.5-0.6-5.3-0.6c-11.8,0-21.6,8.4-23.8,19.6c-4.7,0.9-8.9,3.3-12.2,6.5C2.8,62.8,0,68.9,0,75.7C0,89.1,10.9,100,24.3,100
 h71.5c13.4,0,24.3-10.9,24.3-24.3C120,65.3,113.4,56.4,104.1,52.9z M69.1,59.2c0,26.3,0,0,0,26.3c-10.7,0-2.9,0-15.5,0
 c0-26.3,0,0,0-26.3c-8.9,0,0,0-8.9,0c16.6-16.6,0,0,16.6-16.6c16.6,16.6,0,0,16.6,16.6C69.1,59.2,78,59.2,69.1,59.2z"/>
</svg>

<p>Иконка №2:</p>
<svg id="second" x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;">
<path d="M104.1,52.9c0.1-0.8,0.1-1.5,0.1-2.3c0-16.9-13.7-30.6-30.6-30.6c-10.3,0-19.4,5.1-25,12.9
 c-1.7-0.4-3.5-0.6-5.3-0.6c-11.8,0-21.6,8.4-23.8,19.6c-4.7,0.9-8.9,3.3-12.2,6.5C2.8,62.8,0,68.9,0,75.7C0,89.1,10.9,100,24.3,100
 h71.5c13.4,0,24.3-10.9,24.3-24.3C120,65.3,113.4,56.4,104.1,52.9z M69.1,85.4 69.1,59.2 78,59.2 61.3,42.5 44.7,59.2 53.6,59.2 53.6,85.4z"/>
</svg>

Это то ясно, но почему вырезается в первом без этого стиля? :) — Yuri, May 12 '17 at 16:50

Alexandr_TT · Accepted Answer · 2017-05-15T16:08:42.840

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

Анимация начинается при клике.

<svg id="svg1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="360" height="360" viewBox="0 0 130 120" >
<title> Cloud </title>
<path  fill="none" stroke-width="1" stroke="black" stroke-dasharray="329" stroke-dashoffset="329"
d="M104.1,52.9c0.1-0.8,0.1-1.5,0.1-2.3c0-16.9-13.7-30.6-30.6-30.6c-10.3,0-19.4,5.1-25,12.9
c-1.7-0.4-3.5-0.6-5.3-0.6c-11.8,0-21.6,8.4-23.8,19.6c-4.7,0.9-8.9,3.3-12.2,6.5C2.8,62.8,0,68.9,0,75.7C0,89.1,10.9,100,24.3,100
 h71.5c13.4,0,24.3-10.9,24.3-24.3C120,65.3,113.4,56.4,104.1,52.9z" >
 <animate attributeName="stroke-dashoffset" begin="svg1.click" from="329" to="0" dur="7s" fill="freeze" ></animate>
</path>
<title> Arrow </title>
<path fill="none" stroke-width="1" stroke="black" stroke-dasharray="133" stroke-dashoffset="133" d="M69.1,59.2c0,26.3,0,0,0,26.3c-10.7,0-2.9,0-15.5,0
 c0-26.3,0,0,0-26.3c-8.9,0,0,0-8.9,0c16.6-16.6,0,0,16.6-16.6c16.6,16.6,0,0,16.6,16.6C69.1,59.2,78,59.2,69.1,59.2z"> 
<animate attributeName="stroke-dashoffset" begin="svg1.click" from="133" to="0" dur="7s" fill="freeze" ></animate>
</path>
<text x="50" y="10" font-size="10" fill="grey"> Click me </text>
</svg>

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

2 Answers2

Linked