如何在Angular 8中调用SVG animate标签的beginElement()方法

我来帮你搞定这个SVG动画触发的问题～你的思路是对的，但代码里有个小细节错误，另外我还推荐更符合Angular规范的实现方式，一起来看看：

问题诊断 #

你当前的document.querySelector('svg-id')选择器写错了——要选择ID为svg-id的元素，必须在ID前加上#，也就是document.querySelector('#svg-id')，不然浏览器找不到对应的animate元素。

快速修正：原生DOM操作版本 #

先给你修正后的代码，这样就能正常触发动画了：

TypeScript代码（testsvg.component.ts）

import { Component } from '@angular/core';

@Component({
  selector: 'app-testsvg',
  templateUrl: './testsvg.component.html',
  styleUrls: ['./testsvg.component.scss']
})
export class TestsvgComponent {
  constructor() {}

  onFadePolly() {
    console.log('onFadePolly');
    // 修正选择器，添加#前缀
    const animateElement = document.querySelector('#svg-id') as SVGAnimateElement;
    if (animateElement) {
      animateElement.beginElement();
    }
  }
}

HTML代码（testsvg.component.html）

<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>

更推荐的Angular实现方式（使用ViewChild） #

在Angular里直接操作DOM不是最佳实践，我们可以用ViewChild来获取animate元素，这样更符合框架的响应式理念，也方便后续维护：

TypeScript代码

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-testsvg',
  templateUrl: './testsvg.component.html',
  styleUrls: ['./testsvg.component.scss']
})
export class TestsvgComponent {
  // 通过模板引用变量#svgAnimate获取元素
  @ViewChild('svgAnimate') svgAnimate!: ElementRef<SVGAnimateElement>;

  constructor() {}

  onFadePolly() {
    console.log('onFadePolly');
    // 调用beginElement触发动画
    this.svgAnimate.nativeElement.beginElement();
  }
}

HTML代码

<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">
      <!-- 添加模板引用变量#svgAnimate，供ViewChild获取 -->
      <animate #svgAnimate attributeName="fill-opacity" dur="4s" from="0" to="1" fill="freeze" begin="indefinite"/>
    </polygon>
  </svg>
</div>
<button (click)="onFadePolly()">Fade Me Polly</button>

两种方式都能实现点击按钮触发SVG多边形的淡入动画，第二种方式更适配Angular项目的开发习惯哦～

内容的提问来源于stack exchange，提问作者jumpwire