更新时间:2023-10-30 10:09:46
因此,您需要在#rootSVG***问方法:SVGSVGElement.
So here you need to access the methods on your #rootSVG: SVGSVGElement.
要在Angular中这样做,您可以利用ViewChild并访问nativeElement及其方法:
To do so in Angular you can leverage ViewChild and access nativeElement and its methods:
<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文件中,您需要在ngAfterViewInit挂钩中获取ViewChild,然后您可以开始调用有问题的方法了:
now in your ts file you need to get the ViewChild inside ngAfterViewInit hook, and after that you can start calling the methods in question:
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)
}
}