Svg 嵌套图像<；defs>；不要在铬中出现

我有一些SVG文件，其中一个通过使用

元素包含另一个。为了将所有这些文件合并成一个结果文件，我编写了一些代码，从下面转换

/main.svg

：

#file: ./svg/shared.svg
<svg>
  <image xlink:href="../img/bg.png" id="bg" />
</svg>

#file: ./svg/index.svg
<svg id="index">
  <use xlink:href="./shared.svg#bg" />
</svg>

#file: ./main.svg
<svg>
  <use xlink:href="./svg/index.svg#index" />
</svg>

---

但这感觉真的很有黑客味，我真的对这里的»cleaner«解决方案感兴趣…

您的脚本是在浏览器中执行并试图立即显示结果文档，还是结果写入文件，然后才在浏览器中打开？在这种情况下，它在浏览器中执行并尝试立即显示，请出示剧本。您是否确保所有反序列化操作都正确地检测到SVG名称空间？好问题。脚本很长，但查询是通过xpath完成的，

//svg:use[@xlink:href]

用于获取常见的可疑对象，而

文档。importNode（，true）

用于导入这些。。。所以，是的，我确信已经正确处理了名称空间…您的脚本是在浏览器中执行并试图立即显示生成的文档，还是结果写入文件并在浏览器中打开？它在浏览器中执行并试图立即显示。在这种情况下，请显示脚本。您是否确保所有反序列化操作都正确地检测到SVG名称空间？好问题。脚本很长，但查询是通过xpath完成的，

//svg:use[@xlink:href]

用于获取常见的可疑对象，而

文档。importNode（，true）

用于导入这些。。。所以，是的，我有点确定已经正确处理了名称空间。。。

<svg>
  <defs>
    <svg id="svg-index">
      <defs>
        <image xlink:href="./img/bg.png" id="img-bg" />
      </defs>
      <use xlink:href="#img-bg" />
    </svg>
  </defs>
  <use xlink:href="#svg-index" />
</svg>

setTimeout(function () {
  [...document.querySelectorAll('image')].forEach(
      img => img.setAttribute('xlink:href',
                img.getAttribute('xlink:href')
    )
  );

}, 0)