# 什么是fill属性？

fill属性是SVG中用来指定填充颜色的属性。它可以用来指定矩形，圆形，多边形，路径，文本等等。

# fill属性

fill表示填充颜色，currentColor表示使用当前的颜色。

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="50" fill="#4f46e5" />
</svg>

可以使用css中fill属性指定。

# fill-opacity属性

fill-opacity表示填充颜色的透明度，0表示完全透明，1表示完全不透明。

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="50" fill="#4f46e5" fill-opacity="0.5" />
</svg>

可以使用css中的fill-opacity属性指定。

# fill-rule属性

这个属性可以用来指定填充规则，即如何判断在一片区域是属于内部还是外部，它只对以下元素生效：

• <path>
• <polygon>
• <polyline>
• <text>
• <textPath>
• <tref>
• <tspan>

属性值：

• nonzero（默认值）：表示如果绘制路径为顺时针（从左到右）则+1，如果为逆时针（从右到左）则-1，如果结果为0则属于外部，如果结果不为0则属于内部。
• evenodd：表示绘制的顺序是奇数为内部，偶数为外部，从1开始。

# nonzero

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path
    d="M20 20, H60, V60, H20, M30 30, V50, H50, V30"
    fill="#4f46e5" fill-rule="nonzero"
  />
</svg>

# evenodd

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path
    d="M20 20, H60, V60, H20, M30 30, V50, H50, V30, M35 35, H45, V45, H35"
    fill="#4f46e5" fill-rule="evenodd"
  />
</svg>

MDN参考