通过javascript将SVG插入文档顶部_Javascript_Html_Css_Angularjs_Svg

通过javascript将SVG插入文档顶部

javascript html css angularjs svg

通过javascript将SVG插入文档顶部,javascript,html,css,angularjs,svg,Javascript,Html,Css,Angularjs,Svg,我想在我的角度项目中使用svg精灵。我看到并在本文中提到了使用include\u once将SVG精灵注入页面顶部的方法。然后使用如下方法： <svg viewBox="0 0 100 100" class="icon shape-codepen"> <use xlink:href="#shape-codepen"></use> </svg> 我怎样才能用javascript的方式做到这一点？谢谢。您可以在body onload上调用以

我想在我的角度项目中使用svg精灵。我看到并在本文中提到了使用

include\u once

将SVG精灵注入页面顶部的方法。然后使用如下方法：

<svg viewBox="0 0 100 100" class="icon shape-codepen">
  <use xlink:href="#shape-codepen"></use>
</svg>

我怎样才能用javascript的方式做到这一点？

谢谢。

您可以在body onload上调用以下函数以实现此目的：

function loadSvgTag() {
        var svgTag = '<svg viewBox="0 0 100 100" class="icon shape-codepen">use xlink:href="#shape-codepen"></use></svg>';
        document.body.innerHTML = svgTag+document.body.innerHTML;
}

函数加载svgtag（）{
var svgTag='使用xlink:href=“#shape codepen”>'；
document.body.innerHTML=svgTag+document.body.innerHTML；
}

尝试使用类似SVG的注入器。通过这种方式，您可以将SVG保存在一个外部文件中，该文件将在运行时注入HTMLDOM。这适用于所有支持SVG的浏览器

完整示例可能如下所示（其中image.svg包含svg）：

我想加载一个SVG文件，而不仅仅是一个SVG标记。

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>