SVG defs元素
SVG的 <defs> 元素用于预定义一个元素使其能够在SVG图像中重复使用 。例如你可以将一些图形制作为一个组，并用 <defs> 元素来定义它，然后你就可以在SVG图像中将它当做简单图形来重复使用。看下面的例子：
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <g> <rect x="100" y="100" width="100" height="100" /> <circle cx="100" cy="100" r="100" /> </g> </defs> </svg>
在 <defs> 元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用 <use> 元素来引入它们。如下面的代码所示：
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <g id="shape"> <rect x="50" y="50" width="50" height="50" /> <circle cx="50" cy="50" r="50" /> </g> </defs> <use xlink:href="#shape" x="50" y="50" /> <use xlink:href="#shape" x="200" y="50" /> </svg>
要引用 <g> 元素，必须在 <g> 元素上设置一个ID，通过ID来引用它。 <use> 元素通过 xlink:href 属性来引入 <g> 元素。注意在ID前面要添加一个 # 。
在 <use> 元素中，通过 x 和 y 属性来指定重用图形的显示位置。注意在 <g> 元素中的图形的定位点都是 0,0 ，在使用 <use> 元素来引用它的时候，它的定位点被转换为 <use> 元素 x 和 y 属性指定的位置。
下面是上面代码的返回结果：
上面SVG图像中绿色的圆点并不是示例代码的一部分。它们是用来显示2个 <use> 元素的 x 和 y 坐标的。
哪些元素可以被定义为defs中的元素呢？
你可以将下面的元素放入到 <defs> 元素中使用：
任何图形元素，如： rect ， line 等
g
symbol
SVG symbol元素SVG <symbol> 元素用于定义可重复使用的符号。 嵌入在 <symbol> 元素中的图形是不会被直接显示的，除非你使用 <use> 元素来引用它。
下面是一个使用 <symbol> 元素的简单例子：
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100"> <symbol id="shape2"> <circle cx="25" cy="25" r="25" style="fill:#bf55ec;"/> </symbol> <use xlink:href="#shape2" x="50" y="25" /> </svg>
<symbol> 元素需要一个ID号，以便以被 <use> 元素引用。
一个 <symbol> 元素可以有 preserveAspectRatio 和 viewBox 属性。而 <g> 元素不能拥有这些属性。因此相比于在 <defs> 元素中使用 <g> 的方式来复用图形，使用 <symbol> 元素也许是一个更好的选择。
SVG use元素SVG <use> 元素可以在SVG图像中多次重用一个预定义的SVG图形 ，包括 <g> 元素和 <symbol> 元素。被重用的图形可以在定义 <defs> 的内部（图形将不可见直到使用use来引用它）或外部。
下面是一个使用 <use> 元素的例子：
<svg> <defs> <g id="shape"> <rect x="50" y="50" width="50" height="50" /> <circle cx="50" cy="50" r="50" /> </g> </defs> <use xlink:href="#shape" x="50" y="50" /> <use xlink:href="#shape" x="200" y="50" /> </svg>
上面的例子显示的是在 <defs> 元素中定义的 <g> 元素。
要引用 <g> 元素，必须给它一个ID号，通过ID号来引用它。
下面是上面代码的返回结果：
我们也可以引用不在 <defs> 元素中的图形。 <use> 元素可以引用SCG图像中的任何元素，只要这个元素有一个唯一的ID号，例如：
<svg width="500" height="110"> <g id="shape2"> <rect x="0" y="0" width="50" height="50" /> </g> <use xlink:href="#shape2" x="200" y="50" /> </svg>
这个例子在 <g> 元素中定义了一个 <rect> 元素。然后通过 <use> 元素来引用这个 <g> 元素。它返回的结果如下面所示：
注意这里原始图形和复用的图形都会被显示。因为原始的图形并没有定义在 <defs> 或 <symbol> 元素中。所以它是可见的。
你可以为引用的图形设置CSS样式。你可以在 <use> 元素中使用 style 属性来为复用的图形设置它的样式。例如：
<svg width="500" height="110"> <g id="shape3"> <rect x="0" y="0" width="50" height="50" /> </g> <use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/> <use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/> </svg>
查看更多关于SVG基础 | SVG defs元素、symbol元素和use元素的详细内容...