Làm thế nào để thêm một yếu tố SVG trong thời gian chạy - Góc

Question

tôi sẽ thêm một yếu tố SVG bằng cách nhấp vào nút:

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


     }); 
    } 
}); 

Yếu tố sẽ được bổ sung một cách chính xác như tôi mong đợi, nhưng vấn đề là nó là không hiển thị ở vị trí liên quan! Tôi đã kiểm tra html nguồn của trang và tôi hoàn toàn chắc chắn về điều đó. Đây là câu hỏi của câu hỏi này: jsfiddle

Ngoài ra, tôi đang sử dụng angular phiên bản 1.4.x.

Answer 1

Như @RobertLongson nói trong comment của câu hỏi bạn nên đề cập đến SVG namespace trong mỗi và mỗi khi bạn muốn thêm một yếu tố mới SVG, giống như mẫu này:

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

Bạn có thể sử dụng chức năng này trong để thêm phần tử SVG mới. Tôi cũng đã cập nhật fiddle.