SVG 애니메이션 색상 전환

Question

안녕 얘들 아 CSS 애니메이션을 사용하여 배경색이 바뀌는 SVG를 사용하여 사각형을 만들려고합니다. Chrome에서 작동하지만 Firefox 나 IE에서는 작동하지 않습니다.이 문제를 해결할 수있는 방법이 있습니까? 여기

는 예를 들어 바이올린입니다

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

이

/* 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와 파이어 폭스에 추가하려면 CSS 코드, 그들은 모두 블랙 박스

에게 보여

HTML 코드

jsFiddle Link

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

Answer 1

당신은 여기 내 바이올린은 SVG에서 옵션 애니메이션을 사용하여 다른 방법을 시도했습니다이

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

}