用 Angular 绑定 svg 属性答案

【问题标题】：Binding svg attribute with Angular用 Angular 绑定 svg 属性
【发布时间】：2017-03-01 17:36:06
【问题描述】：

我的 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形式为rotate(...,...,...)，均为字符串类型。当值改变时，这个线元素不会改变。它既不旋转也不正确显示x2 属性。

顺便说一句，日期绑定编程正确，因为我还在<p> 标签中使用了{{x2}}，它显示正确。

【问题讨论】：

顺便说一句，如果您更具体地了解您正在使用的 AngularJS 版本，将会有所帮助。我假设您使用的是Version 1。我还想知道您是否真的需要更改 x2，因为您正在旋转生产线。

标签： javascript angularjs svg

【解决方案1】：

我知道这已经很老了，但又一次偶然发现了这个问题，所以我想我会提供正确的方法。在较新的 Angular 中，您需要使用以下语法：

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

【讨论】：

在 Angular 8 中完美运行！谢谢！我用过下一个：[attr.d]="gauge[65]"
我如何设置 stroke-dasharray 属性，因为它有 2 个值。我试过的是：[attr.stroke-dasharray]="circle.rev_percentage + ' ' + circle.rev_percentage - 100"。它的鞋NaN;

【解决方案2】：

要控制 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}}" />

【讨论】：