Question

我正在使用ng-inline-svg 模块来允许将SVG代码直接插入模板中，并且我想知道是否有任何方法可以将Angular动画直接应用于SVG，而不必添加任何种类的SVG本身的指令。我想确保这些图像可重复使用，并且与单个动画无关。

不幸的是，Stackblitz尚不提供使用静态文件的功能，因此我的示例无法真正显示ng-inline-svg模块的使用。 https://stackblitz.com/edit/angular-y7gxu3

以下是模块插入SVG的方式：

<div class="my-icon" aria-label="My icon" [inlineSVG]="'image.svg'"></div>

我希望将动画应用于image.svg，而不实际更改文件的内容-除非有一种方法可以对其进行更改，以便不必使用相同的动画就可以重用它。

我想使用的动画：

import { Component } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { trigger, state, style, animate, transition, keyframes } from '@angular/animations';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ],
      animations: [
        trigger('scaleEffect', [
          state('small', style({
              opacity: 1,
          })),
          state('large', style({
              opacity: 1,
          })),
            transition('small <=> large', animate('900ms ease-out', keyframes([
              style({transform: 'scale(1)'}),
              style({transform: 'scale(1.4)'}),
              style({transform: 'scale(1)'})
            ]))),
        ]),
      ]
    })
    export class AppComponent  {
      name = 'Angular';
      state = 'small';

      animateScale() {
        this.state = (this.state === 'small' ? 'large' : 'small');
      }
    }

我可以对动态插入的SVG使用CSS动画，因此这是一个合适的备用。我刚刚开始学习Angular及其动画库，并且倾向于使用SVG，所以我想看看是否有可能，甚至没有后顾之忧。谢谢！

当使用从文件路径中提取图像的Angular模块时，如何将动画应用于SVG图像

0 个答案: