如何使用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
height
attribute 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屋!