AngularJS & SVG

Dirk Ecker (decker)

Dec 18, 2015·1 min read

Angularjs and SVG can not so easily be combined until angularjs 1.3 came along. That means since 1.3 you can control the creation of dom nodes using a new directive attribute called templateNamespace.

Example with templateNamespace:

.directive(‘svgInternal’, function () {
   return {
     templateNamespace: ‘svg’,
     template: ‘<g><rect height=”25" width=”25" /><text x=”30"
       y=”20">Hallo Welt</text></g>’,
     restrict: ‘E’,
     replace: true
   };
});

If you have to work with < 1.3 , you can combine SVG and AngularJS by putting a SVG-Node around it.

Example with additonal SVG-Node:

.directive(‘svgInternal’, function () {
   return {
     template: ‘<svg><g><rect height=”25" width=”25" /><text x=”30"
       y=”20">Hallo Welt</text></g></svg>’,
     restrict: ‘E’,
     replace: true
   };
});

This can of course also be put into a directive:

angular.module('myModule');

module.directive('extSvg', [ '$compile',  function ($compile) {
  return {
    restrict: 'E',
    scope: {
      content: '='
    },
    link: function($scope, $element) {
      $element.replaceWith($compile('<svg>' + $scope.content + '</svg>')($scope.$parent));
    }
  };
}]);

Which can then be used as follows:

<ext-svg data-content="
  <g>
    <rect height=”25" width=”25" />
      <text x=”30" y=”20">Hallo Welt</text>
  </g>"></ext-svg>

I hope this helps one or the other stumbled about this.