如何使用 javascript 或 jquery 动态添加 SVG 图形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32637811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add a SVG graphic dynamically using javascript or jquery?
提问by MarkL
I am trying to create a SVG tag structure only when or after page loads.
我试图仅在页面加载时或之后创建 SVG 标记结构。
This request may seem strange but this is needed since most of the html markup is generated by a compiled authoring software application so I can't tamper with it. I can only "inject" javascript to create additional assets (ex: Divs) as needed.
这个请求可能看起来很奇怪，但这是必需的，因为大多数 html 标记是由编译的创作软件应用程序生成的，所以我不能篡改它。我只能根据需要“注入”javascript 来创建额外的资产（例如：Divs）。
See below for markup. [Portions of html markup have been omitted for clarity.]
请参阅下面的标记。[为清楚起见，已省略部分 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>
If I place the SVG markup in the destination location manually, page and SVG renders properly. If I try to create markup dynamically, I get nothing.
如果我手动将 SVG 标记放置在目标位置，页面和 SVG 会正确呈现。如果我尝试动态创建标记，我将一无所获。
When I view html source after page loads there is no markup for the SVG which should have been created by the function.
当我在页面加载后查看 html 源代码时，没有应该由函数创建的 SVG 标记。
I have tried doing via a <body onLoad="run()">event but it also does not work.
我试过通过<body onLoad="run()">事件来做，但它也不起作用。
Note: This function has worked fine when I need to create a new DIV dynamically.
注意：当我需要动态创建一个新的 DIV 时，这个函数运行良好。
What am I doing wrong? Thanks in advance to all.
我究竟做错了什么？在此先感谢大家。
回答by Holger Will
what you are doing is perfectly fine. There are some small flaws in your svg wich prevents it from showing up.
你在做什么完全没问题。您的 svg 中存在一些小缺陷，无法显示。
- as t1nr2y points out, use the propper namespace
(
xmlns="http://www.w3.org/2000/svg") - the svg's
heightattribute is missing the quotes (height="100") - your svg elements is not closed (missing
</svg>) - your circle is way outside your viewport (
width="100" height="100"butcx="400" cy="400")
- 正如 t1nr2y 指出的那样，使用 propper 命名空间 (
xmlns="http://www.w3.org/2000/svg") - svg 的
height属性缺少引号 (height="100") - 您的 svg 元素未关闭（丢失
</svg>） - 你的圈子在你的视口之外（
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>回答by t1nr2y
The javascript for SVG is a little different, since they are in different namespaces. On quick research, I couldn't find exactly where I learned this, but I did find an old SO questionwhich does show the how it is created a little differently. Since I haven't personally researched it, I can only suggest that the outerHTML function doesn't work, and you must find the SVG namespace equivalent. Try researching on w3.org site for more info on this.
SVG 的 javascript 有点不同，因为它们位于不同的命名空间中。在快速研究中，我无法确切地找到我在哪里学到的，但我确实找到了一个旧的 SO 问题，它确实显示了它是如何创建的。由于我没有亲自研究过，所以只能建议outerHTML 函数不起作用，必须找到等效的SVG 命名空间。尝试在 w3.org 站点上进行研究以获取更多信息。
Edit: After further research, please try creating your SVG element (rather than using a string).
编辑：经过进一步研究，请尝试创建您的 SVG 元素（而不是使用字符串）。
For example:
例如：
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "640");
...
document.getElementById("div").appendChild(svg);
回答by Ruslan López
Your svg dimensions ( 100 x 100 ) are smaller than the position of your circle.
您的 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>