带有 SVG 图形的 Angular答案

【问题标题】：Angular with SVG graphics带有 SVG 图形的 Angular
【发布时间】：2023-03-05 08:08:02
【问题描述】：

我对 Angular js 很陌生。而且我不明白为什么 Angular 不能与<svg> 一起正常工作。当我尝试使用 Angular 使 SVG 元素处于活动状态时，我在控制台中看到错误：例如在指令中我有以下模板：

<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>

我还在指令范围内设置了radius 变量，但此代码不起作用。控制台指示我对路径元素的 d 属性具有无效值。我也尝试了ng-attr-d，正如官方文档中关于Angular指令的建议，但它也不起作用？为什么会发生这种情况。 SVG 元素有什么特别之处。我认为这与 Angular 如何将 {{}} 替换为实际值有关。在呈现<svg> 之后，可能会通过调用$interpolate 将{{value}} 替换为Angular 并且出现错误？我也知道类似的技巧：How to prevent AngularJS from making lowercase HTML attributes 但是为什么ng-attr-* 不起作用？

【问题讨论】：

你能告诉我们你收到的错误信息吗？

标签： javascript angularjs svg

【解决方案1】：

所以我得出结论，SVG 属性不能与数据绑定一起使用。相反，您可以为自定义属性制作自己的指令。更改自定义属性您可以更改SVG 中的目标属性。例如，

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

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

}

});

解决方案与How to prevent AngularJS from making lowercase HTML attributes 相同。问题是为什么 SVG 会发生这种情况。

【讨论】：