在 SVG 形状中切割孔

SVG（可缩放矢量图形）是一种用于制作矢量图形的 XML 标记语言。它可以轻松地创建各种形状，并允许在这些形状中“切割孔”，这是创建复杂形状的有用技术。

切割孔

切割孔是用一个形状来“切割”另一个形状的区域，从而创建一个新的形状。在 SVG 中，我们可以使用 <defs> 、 <mask> 和 <clipPath> 元素来定义切割孔。

<defs> 元素

在 <defs> 元素中，我们可以定义一个形状，并使用它来切割一个或多个其他形状中的区域。这是一个示例：

<svg>
  <defs>
    <rect id="cutout" x="50" y="50" width="100" height="100" />
  </defs>
  
  <rect x="0" y="0" width="200" height="200" fill="blue" />
  <rect x="75" y="75" width="50" height="50" fill="white" mask="url(#cutout)" />
</svg>

在这个例子中，我们定义了一个名为 cutout 的矩形，然后将它用作一个相对较小的矩形的蒙版，该矩形被放置在较大的蓝色矩形内部。因为 cutout 是在 <defs> 元素中定义的，所以可以多次使用。

<mask> 元素

<mask> 元素与 <defs> 具有相同的功能，但它有更多的参数，允许更复杂的切割区域。这是一个示例：

<svg>
  <defs>
    <mask id="cutout">
      <rect x="0" y="0" width="200" height="200" fill="white" />
      <rect x="50" y="50" width="100" height="100" fill="black" />
    </mask>
  </defs>
  
  <rect x="0" y="0" width="200" height="200" fill="blue" />
  <rect x="75" y="75" width="50" height="50" fill="white" mask="url(#cutout)" />
</svg>

在这个例子中，我们定义了一个名为 cutout 的蒙版，其中包含两个矩形，一个白色和一个黑色。在 <mask> 元素中，白色矩形表示切割孔所在的区域，黑色矩形表示要切割的形状。在使用时，我们使用 mask 属性将蒙版应用到一个矩形中，这个矩形被放置在较大的蓝色矩形内部。

<clipPath> 元素

<clipPath> 元素与 <mask> 有些相似，但它仅用于裁剪形状。这是一个示例：

<svg>
  <clipPath id="cutout">
    <rect x="50" y="50" width="100" height="100" />
  </clipPath>
  
  <rect x="0" y="0" width="200" height="200" fill="blue" clip-path="url(#cutout)" />
</svg>

在这个例子中，我们定义了一个名为 cutout 的裁剪路径，该路径包含一个矩形。在使用时，我们使用 clip-path 属性将裁剪路径应用于一个矩形中，这个矩形被放置在较大的蓝色矩形内部。注意，用于裁剪的形状没有填充颜色或边框属性。

总结

在 SVG 中，我们可以使用 <defs>、<mask> 和 <clipPath> 元素来切割孔或裁剪形状。这些技术可以用于创建复杂的形状，以及在注重性能的应用程序中优化图形。