如何使用javascript或jquery动态添加SVG图形？ [英] How can I add a SVG graphic dynamically using javascript or jquery?
问题描述
我试图在页面加载时或之后创建一个SVG标签结构。
这个请求可能看起来很奇怪，但这是必须的，因为大多数html标记都是由编译的创作软件应用程序生成的，所以我不能篡改它。我只能注入javascript来创建额外的资产（例如：Divs）。
请参阅下面的标记。 [b]
< 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.5emonclick =go（）width =100height = 100>< circle cx =400cy =400r =40stroke =redstroke-width =4fill =blue/>';
}
< / script>
< body>
....
< div id =myDiv>< / div>
....
< script>
run（）;
< / script>
< / body>
< / html>
如果我手动将SVG标记放置在目标位置，页面和SVG将正确渲染。如果我尝试动态创建标记，我什么也得不到。
当我在页面加载后查看html源代码时，没有应该由函数创建的SVG标记。
我曾经通过< body onLoad =run（）> 事件尝试过，但它也是注意：当我需要动态创建一个新的DIV时，这个函数工作正常。
我做错了什么？在此先感谢所有人。
您所做的事情非常好。
- t1nr2y指出，使用propper命名空间
（xmlns =http://www.w3.org/2000/svg） - svg的
height属性缺少引号（height =100） - 您的svg元素不是关闭（缺少
< / svg>）您的圈子超出了您的视口（width = 100height =100但cx =400cy =400）
var newSvg = document.getElementById（'myDiv'）; newSvg.outerHTML + =' < svg xmlns =http://www.w3.org/2000/svgstyle =position：absolute; z-index：10; margin：0; padding：0; top：0em; left：0.5em onclick =go（）width =100height =100>< circle cx =40cy =40r =40stroke =redstroke-width =4fill =blue/>< / svg>';
< div id =myDiv>< / div> div>
I am trying to create a SVG tag structure only when or after page loads.
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.
See below for markup. [Portions of html markup have been omitted for clarity.]
<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.
When I view html source after page loads there is no markup for the SVG which should have been created by the function.
I have tried doing via a <body onLoad="run()"> event but it also does not work.
Note: This function has worked fine when I need to create a new DIV dynamically.
What am I doing wrong? Thanks in advance to all.
what you are doing is perfectly fine. There are some small flaws in your svg wich prevents it from showing up.
- 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")
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>
这篇关于如何使用javascript或jquery动态添加SVG图形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
