Question

大家好我正在尝试使用SVG制作一个矩形，其背景颜色使用css动画进行更改。它在Chrome中工作但不是Firefox或IE，是否有任何关于这个或解决方案的工作？

这是小提琴作为例子

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 Link

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;

}

SVG动画颜色过渡

1 个答案: