在Angular中绑定svg属性

Binding svg attribute with Angular

本文关键字：svg 属性 绑定 Angular      更新时间：2023-09-26

我的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属性。

顺便说一下，日期绑定是正确编程的，因为我也在<p>标记中使用{{x2}}，并且它被正确显示。

我知道这已经很老了，但是又一次偶然发现了这个问题，所以我认为我应该提供正确的方法。在较新的Angular中，你需要使用以下语法:

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

要控制svg的line-transform属性，需要使用ng-attr-myAttr方法，在这种情况下，myAttr是svg行的x2和transform属性。例如，可以这样编写svg行:

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

相关文章：