Как сделать остановку / паузу / возобновление SVG анимации с Angular 9?

Question

Спецификация c SVGSVGElement содержит такие методы, как pauseAnimations() или unpauseAnimations(). Но как я могу получить доступ к этим методам в Angular 9? Или как я могу приостановить / возобновить SVG-анимацию пути?

<svg id="rootSVG" width="500" viewBox="50 0 700 400" xmlns="http://www.w3.org/2000/svg">
    <svg:circle r="10" fill="white" id="white">
        <svg:animateMotion
            id="innerTrack" 
            [attr.dur]="durationInner" 
            begin="indefinite" 
            repeatCount="0" 
            calcMode="linear"
            [attr.path]="innerPath"
            (begin)="status()"
        />
    </svg:circle>
</svg>

В чистом JS я бы сделал следующее:

var pause = document.getElementById('innerTrack');
    pause.pauseAnimations(); 

Но когда я делаю это с Angular 9 Я получаю ошибку компиляции:

error TS2551: Property 'pauseAnimations' does not exist on type 'HTMLElement'. Did you mean 'getAnimations'?

Так что вопрос: как это сделать?

Answer 1

Так что здесь вам нужно получить доступ к методам вашего #rootSVG: SVGSVGElement.

Для этого в Angular вы можете использовать ViewChild и получить доступ к nativeElement и его методам:

<svg #rootSVG viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <svg:path fill="none" stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <svg:circle r="5" fill="red">
    <svg:animateMotion dur="3s" repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </svg:circle>
</svg>

теперь в вашем файле ts вам нужно получить ViewChild внутри хука ngAfterViewInit, и после этого вы можете начать вызывать рассматриваемые методы:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('rootSVG') rootSVG;

  name = 'Angular';

  ngAfterViewInit() {

    setInterval(()=>{
      this.rootSVG.nativeElement.pauseAnimations();
    }, 500)

    setInterval(()=>{
      this.rootSVG.nativeElement.unpauseAnimations();
    }, 1500)
  }
}

Вот рабочая демка: https://stackblitz.com/edit/angular-yngun9