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

Question

我是 SVG 世界的新手。

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

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

我不知道怎么做。

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

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

有什么想法吗？

Answer 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> 标签中

How to load multiple external .svg file into one <svg> tag

html

javascript

svg