0 
<line x1="100" y1="100" x2="100" y2="35" stroke="white" stroke-width="4" stroke-linecap="round">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" [attr.from]="initialValue + ' 100 100'" [attr.to]="updatedValue + ' 100 100'" dur="2s" additive="sum" fill="freeze"/>
</line>

或者

<line x1="100" y1="100" x2="100" y2="35" stroke="white" stroke-width="4" stroke-linecap="round">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" attr.from="{{initialValue }},100,100" attr.to="{{updatedValue }},100,100" dur="2s" additive="sum" fill="freeze"/>
</line>

在 .ts 文件中

ngOnInit() {
    this.initialValue = 0;
    this.updatedValue = 90;
}

changeCompassValue(){
    this.initialValue = this.updatedValue ;
    this.updatedValue = Math.random() * 360;
}

上面的代码在第一次加载时为 svg 设置动画，并将线从 0 度旋转到 90 度，之后任何值更改 from 和 to 值都不会更新。

谁能发现问题？

4

0 回答 0