Question

我有一个格式为[{name：“blabla”，“svg”：“147,87,156,59,161,59,153,89,149,88”}的json文件，更多...]。

我想在agnularJS ng-repeat中使用它来创建像这样的svg多边形：

 <svg>
       <polygon ng-repeat="item in svgList" points="{{item.svg}}" 
       class="{{item.name}}"</polygon>                   
 </svg>

渲染多边形但我收到错误消息：

错误：属性点：预期数字，“{{item.svg}}”。

我添加了下面的列表来查看发生了什么，我没有收到任何错误。

<ul>
    <li ng-repeat ="item in svgList">{{item.svg}}</li>
</ul>

为什么多边形元素不同于li元素？

svgList是从我的json文件创建的。代码如下：

$http.get('svgTest.json').then(function success(response) {
            $scope.svgList = response.data;
            console.log("ok");
        },function error(response) {
            console.log("error");
        })

Answer 1

此错误是由于浏览器在渲染之前验证SVG的行为，这可以通过ngAttr属性绑定来修复。 Read More

只需装饰points属性，例如ng-attr-points即可修复您的问题。查看此工作Fiddle

Answer 2

使用角形而不是仅点时的ng-attr-points。

svg polygon标签中的ng-repeat问题

2 个答案: