Menu
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.
303
As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.
Since the aspect ratio of the SVG must be maintained (otherwise the SVG would overflow off the page upon resizing) the vertical portions of the SVG must grow as the horizontal portions shrink. In path speak, each v must be dynamic while each h and a can be fixed.
It is extremely responsive because of it primitiveness, however, it has poor text rendering capabilities and any interaction with the element is JavaScript dependent. SVG is vector based and resolution independent (can be resized without getting fuzzy).
To add SVG elements to existing SVG using DOM manipulation and JavaScript, we can select the svg element. Then we can create an element with a namespace and put it inside the svg element as its child. Then we can select the element and add a path element into it by writing: const svg = document.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
