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。

{{1}}

这符合我自己的经验。

在IE 11+中动画SVG

1 个答案: