如何将多个外部 .svg 文件加载到一个 <svg> 标签中答案

【问题标题】：How to load multiple external .svg file into one <svg> tag如何将多个外部 .svg 文件加载到一个 <svg> 标签中
【发布时间】：2015-02-16 13:13:46
【问题描述】：

我是 SVG 世界的新手。

目前，我知道我可以使用<object> 标记将.svg 文件插入网页，或者使用<svg> 标记和javascript 从头开始绘制。

但是，出于某种原因，我想使用 javascript 代码即时创建一些绘图并将一些静态外部文件导入其中。

我不知道该怎么做。

如果可能，我希望能够相对于“主机”svg（即时创建的）的某些元素定位导入的文件。

我更喜欢使用原生 javascript 的技巧，但也欢迎使用经典 svg 库之一的技巧。事实上，我还没有选择使用哪个 svg lib ;)

有什么想法吗？

【问题讨论】：

顺便说一句，如果这个问题有什么奇怪的地方，为什么不向我解释一下，而不是无缘无故地否决我。我说我是 SVG 新手，很乐意学习。

标签： javascript html svg

【解决方案1】：

如果您不想更改外部 SVG，请使用 SVG 的 <image> tag，其工作方式类似于 HTML <img>：

<image xlink:href="other.svg" x="0" y="0" height="100px" width="100px" />

如果要更改外部 SVG 内容，请使用嵌套的<svg> tags。这允许您在 SVG 中定位其他 SVG，同时保留外部 SVG 的坐标等。

<svg>
  <svg x="100" y="100" viewBox="0 0 1000 1000" style="width: 300; height: 300">
    <!-- content of the external SVG file in here -->
  </svg>
</svg>

【讨论】：

非常感谢您的回答。如何将外部 SVG 文件加载到 svg 标签中？
只需使用标准的 Ajax 请求，将响应作为文本或 XML 获取并放入。