0

我想显示 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？

4

1 回答 1

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>
于 2013-06-17T21:34:49.377 回答