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

【问题标题】：CSS animation of SVG elements not working in ChromeSVG 元素的 CSS 动画在 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

【问题讨论】：

标签： css google-chrome animation svg

【解决方案1】：

AFAIK，您无法使用 CSS 访问 <use> 元素的内部部分。

另一种方法是将“图标”分解为单独的符号，然后将两个 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 中为 <use> 的元素设置动画。
我的理解是这是一个 SVG 限制......但我的信息可能已过时，或者如您所说，这可能是 Chrome 中的一个错误......或者他们没有 cahught还没有。
这应该可以，所有用例都应该动画。 <use> 在大多数 UA 上都有错误。