svg - 如何在下定义 SVG 文档，并与标签？

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 规范看来，这应该可以工作。任何指针？

---

原来它是构建我的图像的 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 查看器？