将 .SVG 文件的内容插入 HTML 元素答案

【问题标题】：Insert contents of a .SVG file into an HTML element将 .SVG 文件的内容插入 HTML 元素
【发布时间】：2016-12-30 20:29:28
【问题描述】：

我在文件 my_ui_element.svg 中有一个 SVG 元素。我想将此 SVG 插入到 index.html 中的 HTML 元素中。我该怎么做？

插入前的 HTML：

<div class="Container">
  <!-- Insert SVG here -->
</div>

插入后的 HTML：

<div class="Container">
  <svg>...</svg>
</div>

注意：使用<img src="my_ui_element.svg"> 不是一个可接受的答案，因为它不会将 SVG 元素添加到 DOM。

【问题讨论】：

【解决方案1】：

结果证明这是微不足道的。 SVG 文件是有效的 HTML。

这是一个 jquery 答案：

$('.Container').load('my_ui_element.svg');

【讨论】：

这对我帮助很大！只是想向路过的每个人指出，在 Safari 上，加载似乎并不总是触发 DOM 的重排/重绘（或者在文件完成加载之前为时过早）。因此，在另一个事件导致重排/重绘之前，这些更改是不可见的。