SVG 元素的 CSS 动画在 Chrome 中不起作用

Posted

技术标签:

【中文标题】SVG 元素的 CSS 动画在 Chrome 中不起作用【英文标题】：CSS animation of SVG elements not working in Chrome 【发布时间】：2016-02-06 11:59:18 【问题描述】：

我正在创建一组 SVG 图标，并且我想使用 CSS 为一些元素设置动画。示例代码适用于 IE、Firefox 和 S̵a̵f̵a̵r̵i̵，但拒绝在 Chrome 中制作动画。如果我将动画类从 circle 移动到 use 元素 Chrome 将为整个图标设置动画，但这不是我需要的效果。

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<style> 
.drop 
  animation: dropFrames linear 1s;
  animation-iteration-count: infinite;


@keyframes dropFrames
  0%  opacity:1; 
  100%  opacity:0; 

</style>

<svg style="display:none" >
    <defs>
    
    <symbol id="icon" viewBox="0 0 200 200">
        <circle cx="50" cy="50" r="50" fill="grey"/>
        <circle cx="50" cy="150" r="20"  fill="blue" class="drop"/>
    </symbol>

    </defs>
</svg>

<svg ><use xlink:href="#icon" /></svg>

</body>
</html>

我已经尝试使用 -webkit- 前缀，但没有帮助。

编辑：此示例不再适用于 Safari

【问题讨论】：

【参考方案1】：

AFAIK，您无法使用 CSS 访问 &lt;use&gt; 元素的内部部分。

另一种方法是将“图标”分解为单独的符号，然后将两个 use 元素组合成一个 SVG。

.drop 
  animation: dropFrames linear 1s;
  animation-iteration-count: infinite;

@keyframes dropFrames 
  0% 
    opacity: 1;
  
  100% 
    opacity: 0;
  

<svg style="display:none">
  <defs>

    <symbol id="icon-top" viewBox="0 0 200 200">
      <circle cx="50" cy="50" r="50" fill="grey" />
    </symbol>

    <symbol id="icon-bottom" viewBox="0 0 200 200">
      <circle cx="50" cy="150" r="20" fill="blue" />
    </symbol>

  </defs>
</svg>

<svg>
  <use xlink:href="#icon-top" />
  <use xlink:href="#icon-bottom" class="drop" />
</svg>

【讨论】：

这是 SVG 限制还是 Chrome？令人沮丧的是，我能够在 FireFox、IE 和 Safari 而不是 Chrome 中为 &lt;use&gt; 的元素设置动画。 我的理解是这是一个 SVG 限制......但我的信息可能已过时，或者如您所说，这可能是 Chrome 中的一个错误......或者他们没有 cahught还没有。 这应该可以，所有用例都应该动画。 &lt;use&gt; 在大多数 UA 上都有错误。

以上是关于SVG 元素的 CSS 动画在 Chrome 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

svg中不可以使用css 3d动画吗

带有变换的css关键帧动画不适用于SVG

SVG动画在Edge或IE中不起作用

为啥带有 SVG 的 CSS 剪辑路径在 Safari 中不起作用？

当父级具有边框半径并且子级具有动画时，CSS溢出隐藏在chrome中不起作用

为啥这个 CSS3 动画在 MS Edge 或 IE11 中不起作用？