<path d="M 200,50 L 300,50 L 300,150 L 200,150 Z M 220,70 L 280,70 L 280,130 L 220,130 Z" fill="#e74c3c" fill-rule="nonzero" transform="scale(1,-1) translate(0,-200)"/>
<text x="250" y="180" text-anchor="middle" font-size="12" fill="#666">反向路径</text>

<path d="M 50,50 L 150,50 L 150,150 L 50,150 Z M 70,70 L 130,70 L 130,130 L 70,130 Z" fill="#3498db" fill-rule="nonzero"/>

evenodd 奇偶规则

从某点向任意方向画一条射线，计算路径与射线的交点次数。奇数次则填充，偶数次不填充。

<path d="M 200,50 L 300,50 L 300,150 L 200,150 Z M 220,70 L 280,70 L 280,130 L 220,130 Z" fill="#e74c3c" fill-rule="evenodd"/>
<text x="250" y="180" text-anchor="middle" font-size="12" fill="#666">同向路径</text>

<path d="M 50,50 L 150,50 L 150,150 L 50,150 Z M 70,70 L 130,70 L 130,130 L 70,130 Z" fill="#3498db" fill-rule="evenodd"/>

规则对比

同一个路径使用不同规则可能产生不同效果。

<path d="M 200,100 L 250,30 L 300,100 L 250,170 Z M 220,100 L 250,60 L 280,100 L 250,140 Z" fill="#e74c3c" fill-rule="evenodd"/>
<text x="250" y="190" text-anchor="middle" font-size="12" fill="#666">evenodd</text>

<path d="M 50,100 L 100,30 L 150,100 L 100,170 Z M 70,100 L 100,60 L 130,100 L 100,140 Z" fill="#3498db" fill-rule="nonzero"/>
<path d="M 200,100 L 250,30 L 300,100 L 250,170 Z M 220,100 L 250,60 L 280,100 L 250,140 Z" fill="#e74c3c" fill-rule="evenodd"/>

自相交路径

当路径自身相交时，填充规则决定哪些区域被填充。

<path d="M 200,50 L 300,150 L 300,50 L 200,150 Z" fill="#e74c3c" fill-rule="evenodd"/>
<text x="250" y="180" text-anchor="middle" font-size="12" fill="#666">evenodd</text>

<path d="M 50,50 L 150,150 L 150,50 L 50,150 Z" fill="#3498db" fill-rule="nonzero"/>
<path d="M 200,50 L 300,150 L 300,50 L 200,150 Z" fill="#e74c3c" fill-rule="evenodd"/>

多层嵌套

多层嵌套路径展示了两种规则的差异。

<path d="M 180,30 L 320,30 L 320,170 L 180,170 Z 
         M 200,50 L 300,50 L 300,150 L 200,150 Z 
         M 220,70 L 280,70 L 280,130 L 220,130 Z 
         M 240,90 L 260,90 L 260,110 L 240,110 Z" 
      fill="#e74c3c" fill-rule="evenodd"/>
<text x="250" y="190" text-anchor="middle" font-size="12" fill="#666">evenodd：交替填充</text>

<path d="M 30,30 L 170,30 L 170,170 L 30,170 Z M 50,50 L 150,50 L 150,150 L 50,150 Z M 70,70 L 130,70 L 130,130 L 70,130 Z M 90,90 L 110,90 L 110,110 L 90,110 Z" fill="#3498db" fill-rule="nonzero"/>
<path d="M 180,30 L 320,30 L 320,170 L 180,170 Z M 200,50 L 300,50 L 300,150 L 200,150 Z M 220,70 L 280,70 L 280,130 L 220,130 Z M 240,90 L 260,90 L 260,110 L 240,110 Z" fill="#e74c3c" fill-rule="evenodd"/>

实际应用

五角星

<path d="M 250,20 L 270,80 L 330,80 L 280,115 L 300,175 L 250,140 L 200,175 L 220,115 L 170,80 L 230,80 Z" fill="#f39c12" fill-rule="evenodd"/>
<text x="250" y="195" text-anchor="middle" font-size="12" fill="#666">evenodd：镂空</text>

<path d="M 100,20 L 120,80 L 180,80 L 130,115 L 150,175 L 100,140 L 50,175 L 70,115 L 20,80 L 80,80 Z" fill="#f39c12" fill-rule="nonzero"/>
<path d="M 250,20 L 270,80 L 330,80 L 280,115 L 300,175 L 250,140 L 200,175 L 220,115 L 170,80 L 230,80 Z" fill="#f39c12" fill-rule="evenodd"/>

文字镂空

<rect x="50" y="30" width="200" height="90" fill="#3498db" fill-rule="evenodd"/>
<circle cx="100" cy="75" r="30" fill="#fff"/>
<circle cx="200" cy="75" r="30" fill="#fff"/>

复杂图标

<path d="M 150,20 A 55,55 0 1 1 150,130 A 55,55 0 1 1 150,20 M 150,35 A 40,40 0 1 0 150,115 A 40,40 0 1 0 150,35" fill="#3498db" fill-rule="evenodd"/>

地图区域

<path d="M 30,30 L 150,30 L 150,120 L 30,120 Z M 50,50 L 80,50 L 80,80 L 50,80 Z M 100,60 L 130,60 L 130,100 L 100,100 Z" fill="#3498db" fill-rule="evenodd" stroke="#2980b9" stroke-width="2"/>

规则选择建议

nonzero：适用于需要填充内部区域的图形，如环形、同心圆
evenodd：适用于需要镂空效果的图形，如五角星、地图区域
复杂路径建议先用evenodd测试效果
路径方向影响nonzero规则的结果

上一章：opacity 透明度

下一章：渐变与图案