SVG 奇淫巧技（四）：揭秘放之四海而皆准的 fill-rule，不容错过！

SVG 奇淫巧技（四）：放之四海而皆准的 fill-rule

了解 SVG 的基本知识后，绕不开两个重要的话题：stroke（描边）和 fill（填充）。上一篇我们详细探讨了 stroke，今天就来揭开 fill 的神秘面纱。

fill 概述

fill 属性定义了图形内部区域的填充方式。它可以是纯色、渐变色、图案或其他图像。要正确地理解 fill，我们首先需要了解它的两个基本概念：填充规则和填充模式。

填充规则

填充规则决定了如何确定图形区域是否填充。SVG 提供了两种填充规则：

• nonzero（非零规则）： 该规则从图形路径的起点开始，计算路径的包围区域是否为顺时针或逆时针。顺时针为正向，逆时针为负向。正向和负向区域互相抵消，只有净正向区域才会填充。
• evenodd（偶数奇数规则）： 该规则只计算路径包围区域内正向和负向区域的数量。如果正向区域比负向区域多，则填充；否则不填充。

选择正确的填充规则

不同的填充规则会在复杂路径中产生不同的填充效果。通常来说：

• 对于简单的闭合路径， 两种规则都能很好地工作。
• 对于包含孔洞的复杂路径， nonzero 规则更适合，因为它能够正确处理孔洞区域。
• 对于重叠路径， evenodd 规则更适合，因为它能够防止填充重叠区域。

填充模式

填充模式决定了图形区域的填充方式，有以下几种选择：

• solid（纯色）： 填充整个区域为纯色。
• gradient（渐变色）： 用两种或多种颜色填充区域，形成渐变效果。
• pattern（图案）： 用预先定义的图案填充区域，可以创建更复杂的纹理。
• url()： 用外部图像填充区域，可以实现更丰富的填充效果。

fill 与其他属性的配合

fill 属性可以与其他属性配合使用，以实现更丰富的填充效果，例如：

• opacity（透明度）： 控制填充区域的透明度。
• stroke-width（描边宽度）： 控制填充区域与描边之间的间距。
• stroke-miterlimit（斜接限制）： 控制填充区域与描边的转角处是否尖锐或圆滑。

浏览器兼容性

在不同浏览器中，fill 属性的表现可能略有不同。然而，只要遵循标准的用法，大多数浏览器都会提供一致的填充效果。以下是一些需要注意的事项：

• Internet Explorer 9 及以下版本 不支持 fill-rule 属性，默认使用 nonzero 规则。
• Firefox 在默认情况下使用 evenodd 规则，但可以通过设置 svg.content.fill-rule 选项来更改。
• Chrome 和 Safari 在所有版本中都支持 fill-rule 属性。

示例

以下示例展示了使用不同填充规则填充复杂路径的效果：

<svg>
  <path d="M100 100 L200 100 L200 200 L100 200 Z" fill="red" fill-rule="nonzero" />
  <path d="M100 100 L200 100 L200 200 L100 200 Z" fill="blue" fill-rule="evenodd" />
</svg>

结论

fill 属性是 SVG 中一个强大的工具，可以用于填充各种形状和路径。通过理解填充规则和填充模式，我们可以创建出美观且复杂的填充效果。掌握 fill 的精髓，将使你在 SVG 设计和开发中更上一层楼。