如何在運行時添加一個SVG元素 - 角

我會通過點擊一個按鈕來添加一個SVG元素：如何在運行時添加一個SVG元素 - 角

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 +' />'); 


     }); 
    } 
});

如我所料的元素會被正確添加，但問題是，它是沒有在相關位置顯示！我檢查了頁面的源代碼html，我完全相信這一點。這是這個問題的小提琴：jsfiddle

此外，我使用angular版本1.4.x。

來源

2015-08-17 Saman Gholami

大概是append將數據放入類似於這個jquery問題的錯誤命名空間http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element –

@RobertLongson我加了xmlns = 「http://www.w3.org/2000/svg」屬性同時適用於svg和circle元素，但結果沒有區別。 –

不會有。您需要理想地使用createElementNS，否則innerHtml將在很多（但不是全部UA）中工作。 –

由於@RobertLongson在問題的評論說你應該提到SVG命名空間每一次你要添加新的元素SVG，像這樣的例子：

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; 
     }

您可以使用此功能爲了添加新的SVG元素。我也更新了fiddle。

來源

2015-08-17 16:35:41 Gabriel

是的你對！它工作正常。 –

如何在運行時添加一個SVG元素 - 角

回答

相關問題