如何通过 JavaScript / jQuery 插入 SVG 内联？答案

【问题标题】：How to insert an SVG inline via JavaScript / jQuery?如何通过 JavaScript / jQuery 插入 SVG 内联？
【发布时间】：2013-05-21 23:11:02
【问题描述】：

$.get('path/to/svg.svg', function(data) {
  $('#my-div').html(data);
});

这会导致控制台中出现“HIERARCHY_REQUEST_ERR: DOM Exception 3”。这个概念的所有变体似乎都在做同样的事情。如果我复制并粘贴我的实际 SVG 并用它替换“数据”，它就可以很好地插入。我是否需要以不同的方式格式化 .svg 或以某种方式首先对其进行解析，以便浏览器不会认为我正在尝试将另一个文档放入我的文档中？

【问题讨论】：

标签： jquery svg

【解决方案1】：

使用 jQuery SVG：http://keith-wood.name/svg.html

【讨论】：

【解决方案2】：

在任何情况下，您都可以将图像重新加载到<div>：

$('#my-div').css('background-image', "path/to/svg.svg");

【讨论】：

嗯，将其设置为背景图像和将 SVG XML 插入文档是非常不同的事情。
你完全正确！但是我们可以看到，您的情况下的SVG文件是由地址路径/to/svg.svg的脚本源/进程的EXTERNAL文件准备的。这意味着，我们花了 2ms 发送 GET URL 和 2ms 接收内容。与 CSS 相同的情况：我们正在设置新 URL，发送 GET（低级）并接收内容。
如果你想在本地代码 (javascript) 中构造 svg 而没有发送接收程序，你可以试试我的 jQuery hack：stackoverflow.com/questions/11792754/…

【解决方案3】：

尝试查看返回数据的子元素。在我的例子中，第一个孩子是 XML 节点，第二个是 DOCTYPE 声明，然后第三个孩子是 SVG 标记，可以通过 .html() 方法添加。但是，除非我在开发人员工具（使用 chrome）中切换容器上的某些样式，否则 SVG 图像仍然不显示。出去做一些谷歌搜索。如果我发现任何有用的东西，我会把它添加到这篇文章的 cmets 中。

【讨论】：

我有一个 0 高度的 SVG 元素！但是，此方法似乎在加载 LinearGradient svg 标签并正确使用它们时存在问题（它们被正确添加到 DOM，但在被填充属性引用时不会被拾取）。我再一次去做一些谷歌搜索，并将发布更多发现