動畫在IE 11+的SVG動畫

我一直在試圖動畫這個心臟SVG和this codepen似乎在鉻，火狐和safari在Mac上正常工作，但在IE 11 +我似乎無法在任何地方找到分辨率。動畫在IE 11+的SVG動畫

我所需要做的就是淡入，增長和淡出，但IE似乎無法在關鍵幀中放大，無論我嘗試什麼。

在此先感謝！

<svg version="1.1" class="svg-pulse" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 42.7" enable-background="new 0 0 60 42.7" xml:space="preserve">

.svg-pulse { width: 100vw; height: 100vh; } 

@-webkit-keyframes svg_pulse { 0% { 
    radius: 10; 
    transform-origin: center center; 
    transform: scale(.1); 
    opacity: 0; } 25% { 
    opacity: .1; } 50% { 
    opacity: .1; } 100% { 
    transform-origin: center center; 
    transform: scale(.8); 
    opacity: 0; } } 

@keyframes svg_pulse { 0% { /*  radius: 5; */ 
    -ms-transform-origin: center center; 
    transform-origin: center center; 
    -ms-transform: scale(.1); 
    transform: scale(.1); 
    opacity: 0; } 25% { 
    opacity: .1; } 50% { 
    opacity: .1; } 100% { 
    -ms-transform-origin: center center; 
    transform-origin: center center; 
    -ms-transform: scale(.8); 
    transform: scale(.8); 
    opacity: 0; } } 

.svg-pulse .pulse { animation: svg_pulse 6s ease; animation-iteration-count: infinite; fill: hotpink; } 

.svg-pulse .two { opacity: 0; animation-delay: 1.5s; } 

.svg-pulse .three { opacity: 0; animation-delay: 3s; } 

.svg-pulse .four { opacity: 0; animation-delay: 4.5s; }

來源

2016-03-28 Nicole M

可能重複的[SVG動畫不工作在IE 11]（http://stackoverflow.com/questions/33812303/svg-animation-not-working-on-ie-11） – claudios

Msdn_svg即使按照微軟簡單SVG動畫的Internet Explorer不工作，不添加JavaScript代碼。

[MSDN_SVG_animationGuide][1]

這與我自己的經驗是一致的。

來源

2016-03-28 01:29:06

引用MSDN：「Internet Explorer does不支持聲明式動畫。不可否認，可以有更多與基於腳本的動畫相關的工作「 –

動畫在IE 11+的SVG動畫

回答

相關問題