8

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.

MarkL
  • 199
  • 1
  • 2
  • 7
  • I just edited my answer with some more info, please see if that works for you. – t1nr2y Sep 17 '15 at 19:45
  • What browser are you trying this on? Safari and IE don't support the creation of SVG content using outerHTML. – Robert Longson Sep 17 '15 at 20:51
  • It was on IE (project requirements) but I'm bummed that it is not working on Firefox now. I got it working on IE (I think). I was hoping it would work on IE and FF.Thanks for the reminder. – MarkL Sep 17 '15 at 21:15
  • I got it working in FF. I had forgotten to include the xmlns="http://www.w3.org/2000/svg" to use the proper namespace. IE 11 seems to not care right now. – MarkL Sep 17 '15 at 21:26

4 Answers4

18

what you are doing is perfectly fine. There are some small flaws in your svg wich prevents it from showing up.

  1. as t1nr2y points out, use the propper namespace (xmlns="http://www.w3.org/2000/svg")
  2. the svg's height attribute is missing the quotes (height="100")
  3. your svg elements is not closed (missing </svg>)
  4. your circle is way outside your viewport (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>
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207
Holger Will
  • 7,228
  • 1
  • 31
  • 39
  • Thanks for the feedback. I made all the corrections you mentioned, even used your code, but it still doesn't render. I think t1nr2y is probably right. I will research that angle. – MarkL Sep 17 '15 at 19:27
8

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 question which 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.

Edit: After further research, please try creating your SVG element (rather than using a string).

For example:

  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", "640");
  ...
  document.getElementById("div").appendChild(svg);
Community
  • 1
  • 1
t1nr2y
  • 656
  • 6
  • 20
  • Thanks for the feedback. I will research that angle. – MarkL Sep 17 '15 at 19:32
  • @MarkL you are welcome. I decided to look again on the w3 site for more info, and I found this http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#JavaScript, hope it helps! – t1nr2y Sep 17 '15 at 19:39
  • I'll try that. I did some thinking and feel like although the namespace issue is there, I am now leaning on the issue being timing related. The call for (newSvg.outerHTML+= '...string...') is simply appending a html tag (mydiv) with a string (my SVG markup). It should at least appear in the source for my rendered page. But it isn't. That is why I am thinking it is timing related. To test my theory I place an alert before the (newSvg.outerHTML+=) call and now I am getting the SVG properly rendered. – MarkL Sep 17 '15 at 21:31
  • @MarkL, a timing issue does make sense, I was trying to figure out how the other answers were working in their snippets as compared to why yours was not. I will research a little on timing of SVG and let you know if I find anything of use – t1nr2y Sep 18 '15 at 12:15
  • Thanks. The behavior on these pages seems to have normalized and even the timing issue seems to have gone away [not sure why; maybe our server is more responsive today...] – MarkL Sep 18 '15 at 18:05
  • One thing I did notice. When I place SVG markup on the page manually, IE is somewhat forgiving if I forget a quote, meaning it will render the SVG fine. Now, if I have a missing quote in the "newSvg.outerHTML+=" it won't render at all. Since my SVG markup is coming from SVGs created in another application (I used Inkscape to generate the SVG markup), I have to be extra careful when copy-pasting, removing white space, tabs, and carriage returns from the Inkscape generated SVG markup. – MarkL Sep 18 '15 at 18:05
  • Also noted that IE 11 is forgiving if you don't declare the namespace attribute (xmlns="http://www.w3.org/2000/svg")....while FF is not. – MarkL Sep 18 '15 at 18:06
0

Your svg dimensions ( 100 x 100 ) are smaller than the position of your circle.

$(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>
Ruslan López
  • 4,433
  • 2
  • 26
  • 37
  • Thanks for the feedback. I made all the corrections you and Holger Will mentioned, even used your code, but it still doesn't render. I think t1nr2y is probably right. I will research that angle. – MarkL Sep 17 '15 at 19:28
0
 var newSvg = document.getElementById('myDiv');
newSvg.innerHTML += ``;

This works well across all browsers.

Fireflies
  • 1
  • 2