在 IE 11+ 中动画 SVG

Question

我一直在尝试为这个心脏 SVG 制作动画，this codepen 似乎在 Mac 上的 chrome、firefox 和 safari 中运行良好，但在 IE 11+ 中我似乎无法在任何地方找到解决方案。

我需要它做的就是淡入、增长和淡出，但无论我尝试什么，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; }

Answer 1

Msdn_svg 即使根据 Microsoft 的说法，简单的 SVG 动画也不能在 Internet Explorer 上运行，除非添加 JavaScript。

[MSDN_SVG_animationGuide][1]

这与我自己的经验一致。