深度剖析 SVG 的容器元素及其独有特性

2023-10-22 12:08:56

在上一篇文章中，我们介绍了 path 的用法以及常见的 path 动画的简单介绍。在这篇文章中，我们将介绍 SVG 中的容器元素及一些特别的容器特性，以此可以实现：组合复用、图形标记、元素纹理、元素遮罩、穿孔效果。

容器元素

容器元素是 SVG 中用于组合其他元素的元素。它们允许您将多个元素组合成一个组，以便对它们进行统一的变换、着色和样式设置。最常见的容器元素是 <g> 元素。

`<g>` 元素

<g> 元素是一个通用容器元素，可用于组合任何类型的 SVG 元素。它可以用来对元素进行分组，以便于管理和变换。例如，您可以使用 <g> 元素将一组形状组合成一个组，然后对该组进行缩放或旋转。

<g transform="translate(100, 100) rotate(45)">
  <circle cx="50" cy="50" r="50" fill="red" />
  <rect x="0" y="0" width="100" height="100" fill="blue" />
</g>

这段代码创建一个由一个圆形和一个矩形组成的组。该组被平移了 100 像素，并旋转了 45 度。

其他容器元素

除了 <g> 元素之外，SVG 还提供了其他一些容器元素，这些元素具有更特定的用途。

<svg> 元素：<svg> 元素是 SVG 文档的根元素。它用于定义 SVG 图形的大小和位置。
<defs> 元素：<defs> 元素用于定义 SVG 图形的样式和渐变。这些样式和渐变可以被其他元素引用。
<symbol> 元素：<symbol> 元素用于定义可重用的符号。符号可以被其他元素引用，以便在文档中多次使用。
<use> 元素：<use> 元素用于引用符号。它允许您在文档中多次使用同一个符号。

特殊容器特性

除了基本的组合功能之外，SVG 容器元素还提供了一些特殊的特性，这些特性可以用来创建更复杂的效果。

裁剪

裁剪允许您将一个元素的形状用作另一个元素的剪裁路径。这可以用来创建各种有趣的视觉效果，例如穿孔效果。

<svg width="200" height="200">
  <defs>
    <clipPath id="circle-clip">
      <circle cx="100" cy="100" r="50" />
    </clipPath>
  </defs>
  <image clip-path="url(#circle-clip)" xlink:href="image.jpg" width="200" height="200" />
</svg>

这段代码创建一个圆形的裁剪路径，并将其应用于图像。结果是图像被裁剪成一个圆形。

蒙版

蒙版允许您将一个元素的形状用作另一个元素的蒙版。这可以用来创建各种有趣的视觉效果，例如淡入淡出效果。

<svg width="200" height="200">
  <defs>
    <mask id="circle-mask">
      <circle cx="100" cy="100" r="50" fill="black" />
    </mask>
  </defs>
  <image mask="url(#circle-mask)" xlink:href="image.jpg" width="200" height="200" />
</svg>

这段代码创建一个圆形的蒙版，并将其应用于图像。结果是图像被蒙版成一个圆形。

混合模式

混合模式允许您将两个元素的像素混合在一起，以创建各种有趣的视觉效果。

<svg width="200" height="200">
  <rect x="0" y="0" width="100" height="100" fill="red" />
  <rect x="100" y="0" width="100" height="100" fill="blue" />
</svg>

这段代码创建两个重叠的矩形。第一个矩形是红色的，第二个矩形是蓝色的。默认情况下，两个矩形会重叠在一起，显示出蓝色的矩形。但是，您可以使用混合模式来改变两个矩形的混合方式。

例如，您可以使用 multiply 混合模式将两个矩形混合在一起，以创建紫色的矩形。

<svg width="200" height="200">
  <rect x="0" y="0" width="100" height="100" fill="red" />
  <rect x="100" y="0" width="100" height="100" fill="blue" mix-blend-mode="multiply" />
</svg>