angular - 如何在 Angular8 中的 svg 动画标签上调用 beginElement()

Question

我在 svg 上有一个动画标签，它的“开始”设置为 begin="indefinite"，这样动画就不会自动播放。我想从 Angular 中的 typeScript 函数触发动画。

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-testsvg',
  templateUrl: './testsvg.component.html',
  styleUrls: ['./testsvg.component.scss']
})
export class TestsvgComponent {
  constructor() {}
  onFadePolly() {
    console.log('onFadePolly');
    document.querySelector('svg-id').beginElement();
  }
}

<div class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 350 350">
        <polygon id="poly" points="220,10 300,210 170,250 123,234" style="fill:red;fill-opacity:0;stroke:black;stroke-width:1">
          <animate id="svg-id" attributeName="fill-opacity" dur="4s" from="0" to="1"
          fill="freeze" begin="indefinite"/>
        </polygon>
  </svg>
</div>
<button (click)="onFadePolly()">Fade Me Polly</button>

标签： angulartypescriptsvg