SVG 填充属性

SVG 是可伸缩矢量图形的缩写，它是一种使用 XML 描述二维图形的语言。在 SVG 中，我们可以使用填充属性来为图形填充颜色或者图片。

fill 属性

fill 属性用于为 SVG 图形填充颜色。它可以接受如下类型的值：

• CSS 颜色值（red、#ff0000 等）
• 渐变（<linearGradient> 或 <radialGradient> 元素）
• 图案（<pattern> 元素）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="red" />
  <rect x="10" y="10" width="80" height="80"
        fill="url(#gradient)" />
  <rect x="20" y="20" width="60" height="60"
        fill="url(#pattern)" />
  <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
    <stop offset="0" stop-color="green" />
    <stop offset="1" stop-color="blue" />
  </linearGradient>
  <pattern id="pattern" x="0" y="0" width="20" height="20"
           patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="20" height="20" fill="gray" />
    <rect x="0" y="0" width="10" height="10" fill="white" />
    <rect x="10" y="10" width="10" height="10" fill="white" />
  </pattern>
</svg>

上面代码中，我们使用了三种类型的 fill 值，分别为：

• red：纯色填充
• url(#gradient)：渐变填充
• url(#pattern)：图案填充

fill-opacity 属性

fill-opacity 属性用于设置填充的不透明度，接受 0 到 1 之间的值（包括 0 和 1）。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="red"
        fill-opacity="0.5" />
</svg>

上面代码中，我们给红色的方块设置了 fill-opacity 属性值为 0.5，表示填充颜色不透明度为 50%。

fill-rule 属性

fill-rule 属性用于设置图形的填充规则。在 SVG 中，如果一个图形包含多个路径，填充的区域可能会有交叉，因此需要设置一个规则来判断哪些区域需要填充色，哪些不需要。

fill-rule 属性接受 evenodd 或 nonzero 两种值：

• evenodd：偶数奇数填充规则
• nonzero：不规则多边形填充规则

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M10 10 L50 90 L90 10 L10 90 L90 90"
        fill="red" fill-rule="evenodd" />
</svg>

上面代码中，我们使用了 fill-rule 属性来设置偶数奇数填充规则，使得路径交叉的区域被填充。如果不设置 fill-rule 属性，默认为 nonzero。

总结

SVG 提供了丰富的填充属性来美化图形，这些属性包括 fill、fill-opacity 和 fill-rule 等。掌握这些属性可以让我们更好地运用 SVG 制作出精美的矢量图形。