When I use AngularJS directive in svg, the result is not presented

Question

I am trying to create an AngularJS directive which I will use inside the svg element.
The directive does not create an svg element, but uses an existing one. I see the correct svg markup in dev-tools, but the browser does not display it.

See a live example .

This is the directive:

angular.module('ui.directives', []).directive('svgText', 
    function() {
      return {
        restrict: 'E',
          replace: true,
          template: '<text fill="green" x="4" y="20" font-weight="bolder" font-size="2" font-family="Arial">89</text>'
      };
    }
  );

Answer 1

This is because jQuery (which uses AngularJS under the hood) does not know how to create svg elements. You can get around this by adding a link function to a directive that clones the created element but creates it in the SVG namespace.

, SVG ( ), , .

module.directive(
    'svgText',
    function () {
        return {
            restrict: 'E',
            template: '<svg xmlns="http://www.w3.org/2000/svg"><text fill="green" x="4" y="20" font-weight="bolder" font-size="2" font-family="Arial">89</text></svg>',
            replace: true,

            link: function (scope, elem, attrs) {
                // Extract the child element to replace the SVG element.
                var child = angular.element(elem[0].firstElementChild);

                // Copy attributes into element.
                for (attrName in attrs) {
                    if(typeof attrs[attrName] === "string") {
                        child.attr(attrName, attrs[attrName]);
                    }
                }
                elem.replaceWith(child );
            }
        };
    }
);

AngularJS + SVG, .

http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS