svg - 使用 angularJS 创建 svg 元素

Question

我正在尝试创建一个带 Angular 的 svg 元素。目前我可以执行 ng-repeat 但是当我尝试为我的属性分配值时出现错误。

<g ng-repeat="cell in row">
    <rect x="{{cell.node.x}}" y="{{cell.node.y}}"></rect>
    <text x="10" y="10">{{cell.node.name}}</text>
</g>

足够有趣的 cell.node.name 确实可以工作并很好地显示名称，但是 cell.node.x 和 cell.node.y，相应地给我以下错误
错误:属性 x="cell.node.x"的值无效 错误:属性 y="cell.node.y"的值无效
有任何想法吗？

Answer 1

较新版本的 Angular 具有 ngAttr 属性绑定(bind)，这应该可以避免在 Angular 启动之前浏览器验证时导致的错误。

示例(来自 Angular docs ):

<svg>
  <circle ng-attr-cx="{{cx}}"></circle>
</svg>