Question

我是SVG世界的新手。

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

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

我不知道该怎么做。

如果可能的话，我希望能够相对于＆＃34; host＆＃34;的某些元素定位导入的文件。 svg（在飞行中创建的那个）。

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

有什么想法吗？

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>标记</svg>中

1 个答案: