在 svg 多边形标签中出现 ng 重复的问题

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>

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

错误：属性点：预期数量，"{{项目.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属性绑定来修复。阅读更多。

只需装饰points属性，就像ng-attr-points一样即可解决您的问题。 看到这个工作小提琴