分享程序员开发的那些事...
更新时间：2023-09-29 20:48:22
您所做的事情非常好。
xmlns =http://www.w3.org/2000/svg） height 属性缺少引号（ height =100）< / svg> ）您的圈子超出了您的视口（ width = 100height =100但
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.
xmlns="http://www.w3.org/2000/svg") height attribute is missing the quotes (height="100")</svg>)width="100" height="100" but 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>