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

【问题标题】：How do I define an SVG doc under <defs>, and reuse with the <use> tag?如何在 <defs> 下定义 SVG 文档，并使用 <use> 标签重用？
【发布时间】：2012-05-12 12:41:06
【问题描述】：

我正在尝试执行以下操作：

<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", "...") 才能让它工作。谢谢！

【问题讨论】：

标签： svg d3.js

【解决方案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 查看器？

【讨论】：

就是这样 - 我正在使用 d3.js 库来构建我的图像，它出于某种原因剪断了命名空间。我必须做.attr("xlink:xlink:href", "...") 才能让它工作。谢谢！
这里也一样。这看起来像是 d3.js 中的一个错误。
dsummersl，你是救命稻草！