>웹 프론트엔드 >CSS 튜토리얼 >내 SVG 애니메이션이 IE11에서 작동하지 않는 이유는 무엇입니까?

내 SVG 애니메이션이 IE11에서 작동하지 않는 이유는 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-02 10:08:14352검색

Why Isn't My SVG Animation Working in IE11?

SVG 애니메이션이 IE11에서 표시되지 않음

IE11에서 SVG 애니메이션이 작동하지 않는 상황에서 근본적인 문제는 브라우저 호환성에서 발생합니다. Microsoft Edge는 특히 스트로크 대시와 관련된 SVG CSS 전환 및 애니메이션을 지원하는 유일한 브라우저입니다.

IE11 비호환성

Microsoft Developer Docs에 설명된 대로 IE11은 SVG 요소에서는 CSS 전환 및 애니메이션을 지원하지 않습니다. 특히, 스트로크-대시 배열 및 스트로크-대시 오프셋 애니메이션에 대한 지원이 부족합니다. 이로 인해 IE11에서는 SVG 원이 표시되지 않습니다.

IE11용 솔루션

IE11과의 호환성을 보장하려면 해당 브라우저가 IE인지 확인이 필요합니다. 그에 따라 스트로크 대시 배열을 조정하십시오. 그러나 이 솔루션은 브라우저 스니핑이 필요하므로 이상적이지 않습니다.

크로스 브라우저 솔루션

크로스 브라우저 솔루션의 경우 GreenSock과 같은 JS 애니메이션 라이브러리 사용을 고려하세요. DrawSVGPlugin을 사용하는 애니메이션 플랫폼(GSAP). 이 플러그인은 모든 주요 브라우저에서 획-대시 배열 및 획-대시 오프셋을 포함한 SVG 요소 애니메이션을 지원합니다.

위 내용은 내 SVG 애니메이션이 IE11에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.