SVG元素上的盒子阴影动画

Question

有没有选项可以在SVG元素上动画CSS box-shadow效果？ 我有以下标记：

<g id="g-svg_el_obj921" style="top: 300px; left: 550px;">
  <circle r="95.12" fill="rgb(50, 149, 196)" class="some_class" id="svg_el_obj921" priority="4" position="300_550" cx="550" cy="300"></circle>
</g>

以及这个动画设置：

circle {
  cursor: pointer;
  -webkit-animation: shadow_fly 310ms infinite ease-in-out;

  @-webkit-keyframes shadow_fly {
    0% {-webkit-svg-shadow: 0 0 7px #53BE12;}
    50% {-webkit-svg-shadow: 0 0 30px #53BE12;}
    99% {-webkit-svg-shadow: 0 0 7px #53BE12;}
  }

  &:hover {
  }
}

感谢您的帮助。

- Lukas

Answer 1

是的，滤镜可以进行动画效果: 这里有关于如何在svg上创建阴影/内角/模糊滤镜的方法。

<svg id="obj921">
  <filter id="imagenconturbulencias" x="0" y="0" width="100%" height="100%">
  <feTurbulence result="cloud" baseFrequency=".01" seed="1" stitchTiles="nostitch" type="fractalNoise" numOctaves="2">
  
  <animate attributeName="baseFrequency" calcMode="paced" begin="0s" dur="12s" values=".01;.13;.01;" repeatCount="indefinite"/>
  </feTurbulence>
  <feComposite operator="in" in="cloud" in2="SourceGraphic"/></filter>
  

  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<svg>
  <use filter="url(#imagenconturbulencias)" xlink:href="#obj921"></use>
</svg>

运行此代码片段！

animate/> 标签位于 filter/> 描述标签内/请仔细查看

<use> 标签中的圆是动画的，您需要尽可能巧妙地隐藏原始精灵。这是使用精灵的常见任务 - 此方法的优点是，您可以在页面上的许多位置引用 {use} 此精灵，但其矢量值仅加载一次（这样可以节省空间）。

- animaacija

Answer 2

至少在css-animation中是不可能的，只有html元素可以实现，而svg元素则不行。

- Theodore K.