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 {
  }
}

寻求帮助。

Answer 1

是的过滤器可以设置动画： Here是如何在svg上创建阴影/插入/模糊过滤器

＆＃13;

<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>

＆＃13;

运行此代码段！

animate/>标记进入过滤器/＆gt;描述标签/仔细观察

＆lt;中的圆圈使用＆gt; tag是动画的，你必须尽可能隐藏原始精灵。这是使用精灵的常见任务 - 这种方法的优点是，你可以在页面上的许多地方引用{use}这个精灵，但它的矢量值被加载一次（节省空间）

Answer 2

至少对于css-animation，它只能用于html元素，而不能用于svg元素。

SVG元素上的盒子阴影动画

2 个答案: