Angular with SVG graphics

Question

I am very new to Angular js. And i can not understand why Angular can not properly work with <svg>. When i try to make SVG elements active with angular, i see errors in console: For example in directive i have following template:

<svg xmlns='http://www.w3.org/2000/svg' class='svgtime'>\
  <path stroke='#fff' stroke-width='5' d='M {{radius+line_size}} 2.50000119262981 A    {{radius+line_size-2.5}} {{radius+line_size-2.5}} 0 1 1 {{radius+line_size-0.1}} 2.500055466403296 Z' fill='transparent'></path>
  <path fill='transparent' stroke='#9BC7F2' stroke-width='2' ng-attr-d='M 60 2  A  58 58 0 0 1 77.83716831288882 5.497827994417321'></path>

I also set radius variables in scope of directive, but this code does not works. Console indicates that i have invalide value for d attribute of path element. I also tryed ng-attr-d as suggested in official doc for Angular directives, but it does not worked too? Why this happens. What is so special in SVG elements. I think it is connected with how Angular replaces {{}} to actual values. May be {{value}} is replaced with Angular by calling $interpolate after <svg> is rendered and i get error? Also i know about tricks like: How to prevent AngularJS from making lowercase HTML attributes But why ng-attr-* does not works?

Can you show us the error message you're getting? – Surreal Dreams Sep 10 '14 at 20:32 — Surreal Dreams, Sep 10 '14 at 20:32

score 0 · Answer 1 · edited May 23 '17 at 12:05

So i concluded that SVG attributes can not be used with data-bindings. Instead you can make your own directive for custom attribute. Changing custom attribute you can change target attribute in SVG. For example,

tester.directive("svgD", function() {
return {
    scope : {
        "svgD" : '@'
    },

    link: function(scope,element, attr) {
            attr.$observe("svgD",function() {
               attr.$set("d",scope.svgD );
            });
    }

}

});

The solution is the same as for How to prevent AngularJS from making lowercase HTML attributes. The question is why this happens with SVG.

Angular with SVG graphics

1 Answers1