How to append svg element within an AngularJS directive?

Question

I am using element.append method, but nothing appears on the screen. Seems that svg doesnt render elements if I use this method. Here is example.

app.directive('dir',  function($document){
    return{
        restrict: "A",
        link: function(scope, element, attr)
        {
            scope.add_circle = function (){
               var area = angular.element( document.querySelector("#draw_area") );
               area.append("<circle cx=50 cy=50 r=10 fill='red'></circle>");
                alert("Circle appended!")
            };
        }
}
});

see this answer and apply its' logic to your directive: http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element — btm1, Apr 29 '14 at 17:21

score 2 · Answer 1 · edited May 23 '17 at 11:53

After i looked some answers about this, I edited my code to:

app.directive('dir',  function($document){
return{
    restrict: "A",
    link: function(scope, element, attr)
    {
        scope.add_circle = function (){
           var area = angular.element( document.querySelector("#draw_area") );
           var namespace = "http://www.w3.org/2000/svg";
           var name = "circle";
           var attributes = {cx: 50, cy:50, r:10, fill: 'red'};
           var svg_element = document.createElementNS(namespace, name);
           for (var attr in attributes)
               svg_element.setAttribute(attr, attributes[attr])
           area.append(svg_element);
            alert("Circle appended!")
        };
    }

} });

Here is good answer about this issue.

How to append svg element within an AngularJS directive?

1 Answers1