2

是否有任何选项可以在 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 {
  }
}

谢谢帮助。

4

2 回答 2

2

是的，过滤器可以动画化： 这是在 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} 这个精灵，但它的矢量值只加载一次（节省空间）

于 2015-04-17T22:04:21.713 回答
0

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

于 2015-03-03T14:40:27.740 回答