fill-rule与填充规则实例页面

展示

//zxx: IE也支持，左nonzero，默认值，右evenodd

代码

HTML：

<svg viewBox="-10 -10 220 120">
    <polygon class="nonzero" points="50,0 21,90 98,35 2,35 79,90"/>
    <polygon class="evenodd" points="150,0 121,90 198,35 102,35 179,90"/>
</svg>

CSS：

.nonzero {
    stroke: deepskyblue;
    fill-rule: nonzero;
}
.evenodd {
    stroke: deepskyblue;
    fill-rule: evenodd;
}