Question

我想显示SVG图像的多个副本，而不是多次重现整个DOM表示。我试图使用svg:image元素来实现这一点而没有任何运气

<svg xmlns="http://www.w3.org/2000/svg" id="tiger1" viewBox="0 0 900 900" version="1.1" width="200" height="200">
    .... contents
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="tiger2" version="1.1" width="200" height="200">
    <image xlink:href="url(#tiger1)" width="200" height="200" x="0" y="0"/>
</svg>

问题在于xlink:href似乎始终将其值解释为资源，因此它正在寻找名为“url（＃tiger1）”的文件。

有没有办法将image与本地DOM引用一起使用？或者是否有一种不同的技术来重复仅存在于DOM中的SVG？

Answer 1

<image>用于完整文件，<use>用于片段，类似这样......

<svg xmlns="http://www.w3.org/2000/svg" id="tiger1" viewBox="0 0 900 900" version="1.1" width="200" height="200">
    .... contents
</svg>
<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="tiger2" version="1.1" width="200" height="200">
  <use width="200" height="200" x="0" y="0" xlink:href="#tiger1" />
</svg>

使用SVG图像元素链接到DOM中的SVG

1 个答案: