CSS关键帧动画不适用于SVG

Question

请看：

http://codepen.io/richardstelmach/pen/RNwvyG

“svg”是html中的id。

CSS 是：

#svg{
  display:block;
  max-height:400px;
  margin:0 auto;
  animation:filters 2s infinite;
}

#svg .colour1{
  fill:#2bb0b7;
}

#svg .colour2{
  fill:#ab3e41;
}

/* animate effects */

@keyframes filters {
  0%{ 
    filter:hue-rotate(0deg); 
  }
  100% { 
    filter:hue-rotate(360deg); 
  }
}

动画不工作。我尝试将其更改为特定的 -webkit- CSS，并尝试将其应用于“. colour1”类，但无济于事。

我还尝试使用动画填充而不是使用色调旋转。但同样，没有运气。

Answer 1

只需添加供应商前缀及其美观：

@keyframes filters {
  0%{ 
    -webkit-filter:hue-rotate(0deg); 
  }
  100% { 
    -webkit-filter:hue-rotate(360deg); 
  }
}

Answer 2

您还需要为过滤器添加前缀：

DEMO

@-webkit-keyframes filters {
  0%{ 
    -webkit-filter:hue-rotate(0deg); 
  }
  100% { 
    -webkit-filter:hue-rotate(360deg); 
  }
}

Answer 3

基本上需要为浏览器添加前缀。 ：

#svg{
  display:block;
  max-height:400px;
  margin:0 auto;
  -webkit-animation:filters 20s infinite;
}

#svg .colour1{
  fill:#2bb0b7;
}

#svg .colour2{
  fill:#ab3e41;
}

/* animate effects */

@-webkit-keyframes filters{
  0%{ 
    -webkit-filter:hue-rotate(0deg); 
  }
  100% { 
    -webkit-filter:hue-rotate(360deg); 
  }
}

此处完成代码：http://codepen.io/richardstelmach/pen/RNwvyG

需要为其他浏览器添加其他前缀。