Question

我正在创建一组SVG图标，我想使用CSS为一些元素制作动画。示例代码适用于IE，Firefox和Safari，但拒绝在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-前缀尝试了这个，但没有帮助。

Answer 1

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

打破“图标”的替代方案。分成单独的符号，然后将两个use元素组合成一个SVG。

＆＃13;

.drop {
  animation: dropFrames linear 1s;
  animation-iteration-count: infinite;
}
@keyframes dropFrames {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

＆＃13;

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

＆＃13;

SVG元素的CSS动画无法在Chrome中使用

1 个答案: