如何在<defs>下定义SVG文档，并使用<use>标签重用？</use> </defs>

Question

我正在尝试做以下事情：

<svg>
    <defs>
        <svg id="importeddoc">...</svg>
    </defs>
    <use x="0" y="0" width="100" height="100" xlink:href="#importeddoc"></use>
</svg>

我认为原始SVG文档的子部分会显示在100x100的框中。但没有任何反应。从SVG spec开始看起来应该可行。有什么指针吗？

---

原来是构建我的图像的d3.js库，它出于某种原因剪掉了命名空间。我不得不.attr("xlink:xlink:href", "...")让它发挥作用。谢谢！

Answer 1

如果将所有名称空间声明添加到svg元素，则确实可以引用嵌入式SVG。以下示例生成如下所示的输出。这适用于我测试过的所有浏览器，也适用于Batik Squiggle：

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="5cm" height="5cm" viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">      
  <defs>
    <svg id="importeddoc">
      <rect width="2cm" height="1cm"/>
      <circle cx="1cm" cy="5mm" r="3mm" fill="red"/>
    </svg>
  </defs>
  <use x="0" y="0" width="100" height="100" xlink:href="#importeddoc"/>
  <use x="0" y="60" width="40" height="20" transform="scale(1.5, 1)" xlink:href="#importeddoc"/>
</svg>

如果它对您不起作用，您使用什么SVG查看器？