用angularJS创建svg元素 [英] creating svg elements with angularJS

问题描述

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

I'm trying to create an svg element with angular. Currently I'm able to do an ng-repeat but when I try to assign values to my attributes I get an error.

<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"的无效值 有什么想法吗?

Interesting enough cell.node.name does work and shows the name nicelly but cell.node.x and cell.node.y, give me the following error accordingly Error: Invalid value for attribute x="cell.node.x" Error: Invalid value for attribute y="cell.node.y" Any ideas?

推荐答案

Angular功能ngAttr属性绑定的较新版本，应避免在Angular启动之前验证浏览器时引起的错误.

The newer versions of Angular feature ngAttr attribute bindings, which should avoid the errors caused when the browser validates before Angular kicks in.

示例(来自角度文档):

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

这篇关于用angularJS创建svg元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！