javascript - Angular with SVG graphics -

i new angular js. , can not understand why angular can not work <svg>. when try make svg elements active angular, see errors in console: example in directive 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    {{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   58 58 0 0 1 77.83716831288882 5.497827994417321'></path> 

set radius variables in scope of directive, code not works. console indicates have invalide value d attribute of path element. tryed ng-attr-d suggested in official doc angular directives, not worked too? why happens. special in svg elements. think connected how angular replaces {{}} actual values. may {{value}} replaced angular calling $interpolate after <svg> rendered , error? know tricks like: how prevent angularjs making lowercase html attributes why ng-attr-* not works?

so concluded svg attributes can not used data-bindings. instead can make own directive custom attribute. changing custom attribute can change target attribute in svg. example,

tester.directive("svgd", function() { return {     scope : {         "svgd" : '@'     },      link: function(scope,element, attr) {             attr.$observe("svgd",function() {                attr.$set("d",scope.svgd );             });     }  } 

});

the solution same how prevent angularjs making lowercase html attributes. question why happens svg.