AngularJS SVG 不会在 Chrome 中加载

【问题标题】：AngularJS SVG won't load in ChromeAngularJS SVG 不会在 Chrome 中加载
【发布时间】：2014-03-24 20:57:34
【问题描述】：

我正在使用 SVG 在 Angular 中进行一些测试，但我遇到了仅在 Chrome 中出现的有趣问题。

如果我试试这个：

<object height="30" width="30" type="image/svg+xml" data="test/svg/{{icon}}.svg">Your browser does not support SVG</object>

它会将其解析为纯 HTML，但仅限于 Chrome。

解决这个问题的方法是什么？

【问题讨论】：

【解决方案1】：

解决方案。来自AngularJS Developer Guide，

我们希望 Angular 能够绑定到这个，但是当我们检查控制台时，我们会看到类似错误：属性 cx="{{cx}}" 的无效值。由于 SVG DOM API 的限制，您不能简单地编写 cx="{{cx}}"。使用 ng-attr-cx 你可以解决这个问题。

如果具有绑定的属性以 ngAttr 前缀（非规范化为 ng-attr-）作为前缀，则在绑定期间将应用于相应的未加前缀的属性。这允许您绑定到原本会被浏览器急切处理的属性（例如 SVG 元素的 circle[cx] 属性）。

就这么简单。

【讨论】：