SVG
<use>
标签是用来重复利用SVG文档中的已定义图形元素的一种方式。它可以引用SVG文档内的其他元素,通常这些元素是在<defs>
标签内预先定义好的。以下是如何结合<use>
标签来重用SVG元素的基本步骤:
-
在
<defs>
中定义可复用元素:
在SVG文档中,先创建一个或多个可以被复用的元素,比如一个形状、路径或者符号(<symbol>
),并给它们分配唯一的ID。<svg> <defs> <!-- 定义一个可复用的圆形 --> <circle id="myCircle" cx="50" cy="50" r="40" fill="blue" /> </defs> </svg>
-
使用
<use>
引用定义的元素:
然后,在SVG文档的任何位置,可以用<use>
标签来引用这个定义过的元素,通过xlink:href
或简写形式的href
属性指向其ID。<svg> <!-- 引用上面定义的圆形 --> <use xlink:href="#myCircle" x="100" y="100" /> <!-- 或者在SVG 2及更高版本中使用 --> <use href="#myCircle" x="200" y="200" /> </svg>
x
和y
属性用于指定引用元素在当前坐标系中的位置偏移。 -
应用样式:
对于<use>
元素本身以及它引用的内容,都可以直接应用CSS样式。如果你希望修改引用元素的样式,可以直接在CSS中针对该元素ID或者<use>
元素设置样式。/* 修改引用元素的颜色 */ #myCircle { fill: red; } /* 或者修改use元素的位置和尺寸 */ use[aria-labelledby="myCircle"] { transform: scale(0.5); opacity: 0.5; }
-
注意 Shadow DOM:
当SVG<use>
元素引用另一个元素时,实际上会在内部创建一个新的Shadow DOM,这意味着对原始元素应用的样式会继承到引用的副本上,但不能直接通过常规CSS选择器作用于克隆后的元素。若需针对克隆体单独设置样式,可能需要使用CSS Variables(自定义属性)或者通过样式内联的方式。
总结,<use>
标签极大地提高了SVG元素的复用性,避免了文档中不必要的冗余,同时支持通过CSS进行灵活的样式控制。