svg - 使用 angularJS 创建 svg 元素

Question

我正在尝试创建一个带角度的 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" 的值无效有什么想法吗？

score 24 · Accepted Answer

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

示例（来自Angular 文档）：

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

score 4 · Accepted Answer

好吧，它正在工作，这是一个 plunk，但是您收到该错误是因为浏览器在呈现 SVG 之前正在对其进行验证，并且在验证时，x 和 y 等于“{{cell.node.x} }”和“{{cell.node.y}}”。一旦角度更新视图，它确实会将矩形放在它们应该在的位置。

不过，我注意到的一件事是，您缺少矩形上的widthand属性，这将导致它们不显示。height

没有很多好的方法来抑制这个错误。我想您可以制作一个自定义指令，直到它们被 $compiled 之后才呈现 SVG 元素。

score 0 · Accepted Answer

作为 blesh 提示：为导致问题的属性制作自定义指令会阻止 Chrome 中的错误。github上有这个问题的解决方案。

3 回答 3