Come aggiungere un elemento SVG in fase di esecuzione - angolare

Question

ho intenzione di aggiungere un elemento SVG facendo clic su un tasto:

myApp.directive('addRectangle', function() { 
    return function(scope, element, attr) { 
     element.bind('click',function() { 
      scope.rectCount++; 
      angular.element(document.getElementsByClassName('svgMain')).append('<circle r=5 cx=200 cy=200 fill=red data-scope='+scope.rectCount +' />'); 


     }); 
    } 
}); 

L'elemento sarà aggiunto correttamente come mi aspetto, ma il problema è che è non mostrato nella posizione correlata! Ho controllato l'html di origine della pagina e ne sono completamente sicuro. Questo è il violino di questa domanda: jsfiddle

Inoltre, sto usando la versione angular1.4.x.

Answer 1

Come @RobertLongson detto nel commento della questione si dovrebbe parlare SVG namespace in ogni volta che si desidera aggiungere un nuovo SVG elemento, come in questo esempio:

function makeSVG(tag, attrs) { 
      var el= document.createElementNS('http://www.w3.org/2000/svg', tag); 
      for (var k in attrs) 
       el.setAttribute(k, attrs[k]); 
      return el; 
     } 

È possibile utilizzare questa funzione in ordine di aggiungere un nuovo elemento SVG. Inoltre ho aggiornato il fiddle.