Question

我有一个SVG文件，当我使用...-> Chrome打开时，该文件会动画化。但是，当嵌入到我的网站中时，动画不起作用。

<template>
  <img src="../assets/img/circular-progress.svg"
     width="26"
     height="26"
     alt="circular progress indicator">
</template>

circular-progress.svg：

<svg width="50px" height="50px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" 
class="lds-rolling" style="shape-rendering: auto; animation-play-state: running; animation-delay: 0s; background: none;">

  <circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" 
  ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#e10050" stroke-width="6" r="35" 
  stroke-dasharray="164.93361431346415 56.97787143782138" style="animation-play-state: running; animation-delay: 0s;" 
  transform="rotate(148.468 50 50)">

    <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" 
    repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;">
    </animateTransform>

  </circle>

</svg>

没有动画的SVG文件

0 个答案: