使用Angular绑定svg属性

Question

我的SVG中有一些元素如:

<div ng-app="myApp" ng-controller="myCtrl">
    ...
    <svg ...>
        <line id="line1" x1="140" x2={{x2}} y1="10" y2="10" transform="{{rotate}}"/>
        ...
    </svg>
</div>

x2结束坐标和旋转的位置在哪里rotate(...,...,...),都是字符串类型.当值更改时,此线元素不会更改.它既不旋转也不x2正确显示属性.

顺便说一句,日期绑定正确编程,因为我也用{{x2}}一个<p>标签,它是正确显示.

Answer 1

我知道这已经很老了,但又一次偶然发现了这个问题,所以我想我会提供正确的方法.在Angular 2/4中,您需要使用以下语法:

<line id="line1" [attr.x1]="140" [attr.x2.]="x2" [attr.y1]="10" [attr.y2]="10" [attr.transform]="rotate"/>

Answer 2

要控制 svg 的 line-transform 属性，您需要使用该ng-attr-myAttr方法，myAttr在本例中是 svg 的 line-transformx2和transform属性。例如，您可以按如下方式编写此 svg 行：

<line id="line1" x1="140" ng-attr-x2={{x2}} y1="10" y2="10" ng-attr-transform="{{rotation}}" />