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.

Developer since the 80'th, working at Forschungszentrum Jülich () …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store