svg标签如何搭配use标签使用

SVG <use> 标签是用来重复利用SVG文档中的已定义图形元素的一种方式。它可以引用SVG文档内的其他元素，通常这些元素是在<defs> 标签内预先定义好的。以下是如何结合 <use> 标签来重用SVG元素的基本步骤：

1. 在 <defs> 中定义可复用元素：
   在SVG文档中，先创建一个或多个可以被复用的元素，比如一个形状、路径或者符号（<symbol>），并给它们分配唯一的ID。

   <svg>
     <defs>
       <!-- 定义一个可复用的圆形 -->
       <circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
     </defs>
   </svg>
   

2. 使用 <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 属性用于指定引用元素在当前坐标系中的位置偏移。

3. 应用样式：
   对于 <use> 元素本身以及它引用的内容，都可以直接应用CSS样式。如果你希望修改引用元素的样式，可以直接在CSS中针对该元素ID或者<use>元素设置样式。

   /* 修改引用元素的颜色 */
   #myCircle {
     fill: red;
   }
   
   /* 或者修改use元素的位置和尺寸 */
   use[aria-labelledby="myCircle"] {
     transform: scale(0.5);
     opacity: 0.5;
   }
   

4. 注意 Shadow DOM：
   当SVG <use> 元素引用另一个元素时，实际上会在内部创建一个新的Shadow DOM，这意味着对原始元素应用的样式会继承到引用的副本上，但不能直接通过常规CSS选择器作用于克隆后的元素。若需针对克隆体单独设置样式，可能需要使用CSS Variables（自定义属性）或者通过样式内联的方式。

总结，<use> 标签极大地提高了SVG元素的复用性，避免了文档中不必要的冗余，同时支持通过CSS进行灵活的样式控制。