ie9 및 firefox로 SVG 애니메이션을 만들 수 없습니다.

제가 누락 된 부분을 모르겠습니다. SVG 애니메이션은 크롬에서는 괜찮 았지만, ie9와 파이어 폭스에서 이미지를 볼 수는 있지만 애니메이션을 볼 수는 없습니다.ie9 및 firefox로 SVG 애니메이션을 만들 수 없습니다.

내가 코렐 드로우 X5에서 SVG 파일을 내 보낸 :

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<!-- Creator: CorelDRAW --> 
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" 
viewBox="0 0 25.4 2.64582" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs> 
    <style type="text/css"> 
    <![CDATA[ 
    .str0 {stroke:#898989;stroke-width:0.05} 
    .fil0 {fill:none} 
    ]]> 
    </style> 
</defs> 
<g id="Capa_x0020_1"> 
    <path class="fil0 str0" d="M0.10261 2.04656c0.08134,0 0.25217... 
    />

을하고 난 애니메이션을 추가 :

<path class="fil0 str0" d="M0.10261 2.04656c0.08134,0 0.25217... 
    stroke-dasharray=""> 
    <animate id="first" attributeName="stroke-dashoffset" from="" to="0" dur="10s" begin="0s" 
    onload="var length = parentNode.getTotalLength(); 
        parentNode.setAttribute('stroke-dasharray',length+','+length); 
        this.setAttribute('from',length)" /> 
    </path>

코드가 너무 많이

http://jsfiddle.net/calamar888/WsxHs/ jsfiddle 감사에서 볼 수 있습니다

PS : 이미 답변을 찾았지만 지금까지 내 문제를 해결할 수있는 항목을 찾을 수 없었습니다.

PS 2 : 파이어 버그 콘솔 아무것도

출처

2013-02-21 fabricio

IE9는 애니메이션을 지원하지 않으며 루트 <svg> 요소 떨어져 온로드 코드 작업을 이동해야하므로 파이어 폭스는 <svg> 요소에 온로드 이벤트를 발생 표시되지 않습니다.

출처

2013-02-21 19:02:05

답변 해 주셔서 감사합니다. 나는 거의 모든 브라우저에서 애니메이션 디스플레이를 확인해야하기 때문에 캔버스에 시도해 볼 것이라고 생각한다. – fabricio

FakeSmile이라는 라이브러리가있어 IE9에서 애니메이션 작업을 할 수있다. –

나는 FakeSmile을 아직 시도하지 않았지만 적어도 eg9에서는 작동하지 않는 예제를보고있다. [예제] (http://www.codedread.com/menu.svg). raphaelJs에 대해 어떻게 생각하십니까 ?? 어제는 html5 캔버스를 시도했지만 캔버스와 경로의 크기를 조정하면 정말 나에게 짜증나는 것처럼 보였다. SVG를 원하는 이유 – fabricio

ie9 및 firefox로 SVG 애니메이션을 만들 수 없습니다.

답변

관련 문제