SVG defs 元素

<defs> 元素是 SVG 的一个内置组件，用于计划重复使用图案、图像、渐变或滤镜。在 <defs> 中定义的对象是不可见的，并且可以在文档的任何地方多次引用。

语法

以下是 <defs> 元素的基本语法：

<svg>
  <defs>
    <!-- 定义对象 -->
  </defs>

  <!-- 引用对象 -->
  <use xlink:href="#object-id" />
</svg>

属性

<defs> 元素没有特定的属性，但是它可以包含其他元素，例如 <linearGradient> 和 <filter>。

示例

这里是一个简单的 <defs> 示例。我们在 <defs> 中定义了一个红色矩形，然后在两个 <use> 元素中调用它，一个放置在左边，一个放置在右边。

<svg width="300" height="150">
  <defs>
    <rect id="red-rect" x="10" y="10" width="100" height="50" fill="red" />
  </defs>

  <use xlink:href="#red-rect" />
  <use xlink:href="#red-rect" x="190" />
</svg>

使用场景

通过使用 <defs> 元素，可以避免复制和粘贴代码，并使 SVG 文档更易于阅读和维护。以下是一些适合使用 <defs> 元素的场景：

• 重复使用具有相同形状的对象
• 定义预定义的渐变或滤镜
• 定义需要在不同位置使用的预定义文本样式

总结

<defs> 元素是 SVG 中一个强大的功能，它允许你定义可重复使用的对象。在很多场景下，这会带来方便和节省工作，同时也使 SVG 文档更加清晰易读。