我们可以在同一个 SVG 中使用两个"use: href"属性吗？

Question

是否可以使用多个"USE"；方法？

<svg xmlns="http://www.w3.org/2000/svg">
<use href="#eye-fill" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<use href="#eye-slash-fill" />
</svg>

至，

<svg xmlns="http://www.w3.org/2000/svg">
<use href="#eye-fill" />
<use href="#eye-slash-fill" style="display: none" /> <!-- Toggle display -->
</svg>

Answer 1

正如您在MDN web文档中看到的，use可以多次使用。

MDN示例：

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
<use href="#myCircle" x="10" fill="blue"/>
<use href="#myCircle" x="20" fill="white" stroke="red"/>
<!--
stroke="red" will be ignored here, as stroke was already set on myCircle. 
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
-->
</svg>