如何使用javascript或jquery动态添加SVG图形

How can I add a SVG graphic dynamically using javascript or jquery?

本文关键字：添加 SVG 图形 动态 jquery 何使用 javascript      更新时间：2023-09-26

我试图仅在页面加载时或之后创建SVG标记结构。

这个请求可能看起来很奇怪，但这是必要的，因为大多数html标记是由编译的创作软件应用程序生成的，所以我不能篡改它。我只能在需要时"注入"javascript来创建额外的资产(例如:div)。

参见下面的标记。[为清晰起见，省略了部分html标记]

<html>
....
<script>
function run()  {
var newSvg = document.getElementById('myDiv'); 
newSvg.outerHTML+='<svg  style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height=100><circle cx="400" cy="400" r="40" stroke="red" stroke-width="4" fill="blue" />';
}
</script>
<body>
....
<div id="myDiv"></div>
....
<script>
run();
</script>
</body>
</html>

如果我手动将SVG标记放置在目标位置，页面和SVG将正确呈现。如果我尝试动态创建标记，我将一无所获。

当我在页面加载后查看html源代码时，没有应该由函数创建的SVG标记。

我已经尝试过通过<body onLoad="run()">事件做，但它也不起作用。

注意:当我需要动态创建一个新的DIV时，这个函数工作得很好。

我做错了什么?提前感谢大家。

你做的很好。你的svg中有一些小缺陷，导致它无法显示。

  1. 如t1nr2y所指出的，使用合适的命名空间( xmlns="http://www.w3.org/2000/svg")
  2. svg的height属性缺少引号(height="100")
  3. 你的svg元素没有关闭(缺少</svg>)
  4. 你的圆圈是在你的视窗外(width="100" height="100"但cx="400" cy="400")

var newSvg = document.getElementById('myDiv');
newSvg.outerHTML += '<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height="100"><circle cx="40" cy="40" r="40" stroke="red" stroke-width="4" fill="blue" /></svg>';
<div id="myDiv"></div>

SVG的javascript有点不同，因为它们在不同的命名空间中。在快速研究中，我找不到我从哪里学到这一点，但我确实找到了一个古老的SO问题，它确实显示了它是如何产生一点不同的。由于我没有亲自研究它，我只能建议outerHTML函数不起作用，您必须找到等价的SVG名称空间。你可以在w3.org网站上搜索更多信息。

编辑:在进一步研究之后，请尝试创建SVG元素(而不是使用字符串)。

例如:

  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", "640");
  ...
  document.getElementById("div").appendChild(svg);

svg的尺寸(100 x 100)小于圆圈的位置。

$(document).ready(function() {
  $('#myDiv').append('<svg  style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height=100><circle cx="4" cy="4" r="4" stroke="red" stroke-width="4" fill="blue" /></svg>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>

var newSvg = document.getElementById('myDiv');newSvg。innerHTML += ' ';之前
相关文章：