Javascript-Generated SVG Not Updating

javascript, jquery, svg

Solution

You will not see any svg output if the elements are not in the svg namespace.

Try replacing your script snippet with this:

var slices = 10;

for(i = 0; i < 360; i += 360 / slices) {
  var element = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
  element.setAttribute("points", "0,0 -10,100 10,100");
  element.setAttribute("transform", "rotate(" + i + ")");
  $('#rotate').append(element);
}

Problem

I have a script that adds elements to an inline SVG image via jQuery, but the new elements don't seem to be showing up. The output is perfectly valid; I can copy it into the original file, reload it, and it will render just fine. But when the script generates it, the new elements aren't visible. Here is a snippet that replicates the problem: http://tinkerbin.com/7OmDWlsz Thanks in advance!

Original source