css - SVG 动画颜色过渡

Question

大家好，我正在尝试使用 SVG 制作一个矩形，其中使用 css 动画改变背景颜色。它在 chrome 中工作，但在 Firefox 或 IE 中不工作，是否有解决此问题或解决方案的方法？

这里以 fiddle 为例

HTML代码

<svg viewBox="0 0 202 197"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<linearGradient y2="0" x2="1" y1="1" x1="1" id="green">
  <stop offset="0" stop-opacity="0.99609" stop-color="#027d07"/>
  <stop offset="1" stop-opacity="0.99609" stop-color="#1ff026"/>
</linearGradient>
<linearGradient id="red" x1="1" y1="1" x2="1" y2="0">
  <stop offset="0" stop-opacity="0.98828" stop-color="#8a0f04"/>
  <stop stop-color="#ff5454" stop-opacity="0.99609" offset="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="50%" height="50%" class="red">
</rect>

CSS 代码

    /* Standard syntax Chrome*/
@-webkit-keyframes pulseRed {
    from {fill:url(#green)}
    to {fill:url(#red)}
}
/* Standard syntax IE and Firefox this is done differently 
because IE and Firefox does not support animation for gradient*/
@keyframes pulseRed {
  from {fill:url(#green)}
  to {fill:url(#red)}
}
.red
{
 -webkit-animation: pulseRed 2s infinite;
  -moz-animation: pulseRed 2s infinite;
    -ms-animation: pulseRed 2s infinite;
        animation: pulseRed 2s infinite;
}

要在IE和Firefox上添加，它们都显示一个黑框

jsFiddle 链接

http://jsfiddle.net/cyj89/zPuGz/

Answer 1

您需要为各自的浏览器使用供应商前缀

试试这个

.red{
-webkit-animation: pulsered 2s infinite;
   -moz-animation: pulsered 2s infinite;
    -ms-animation: pulsered 2s infinite;
        animation: pulsered 2s infinite;

}