CODEWITHSUNDEEP
cssinternet-explorersvgmicrosoft-edge
Kraizee
Kraizee

Reputation: 31

Inline Animated SVG not loading in IE/Edge

I've been trying to create a donut chart not too dissimilar to this example here: https://jsfiddle.net/4azpfk3r/

HTML:

<div class="item html">
 <h2>HTML</h2>
   <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

<div class="item css">
    <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>

CSS

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
}

.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}

.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}

@-webkit-keyframes html {
  to {
    stroke-dashoffset: 80;
  }
}

@keyframes html {
  to {
    stroke-dashoffset: 80;
  }
}

@-webkit-keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}

@keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}

However, in both the above example, and my altered version I have trouble running them in IE 11 and Edge. I'm fairly certain it is due to the animation on the stroke-dashoffset but I'm not sure if there is any work around.

Note: I have already tried adding the line below as some similar questions have suggested but this provides no change in the behaviour

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Upvotes: 0

Views: 1380

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

IE11 does not support CSS animations of SVG elements. So you would need to use a different approach if you want to support non-Edge IE.

However Edge has supported CSS animations of SVG elements since build 10240.

The reason your animations aren't working on Edge is because Edge insists that you include units with CSS values. Other browsers are more forgiving with SVG values.

So to fix, add px to all your dasharray and dashoffset values.

.circle_animation {
  stroke-dasharray: 440px;
  stroke-dashoffset: 440px;
}

@keyframes html {
  to {
    stroke-dashoffset: 80px;
  }
}


.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440px;
  stroke-dashoffset: 440px;
}

.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}

.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}

@-webkit-keyframes html {
  to {
    stroke-dashoffset: 80px;
  }
}

@keyframes html {
  to {
    stroke-dashoffset: 80px;
  }
}

@-webkit-keyframes css {
  to {
    stroke-dashoffset: 160px;
  }
}

@keyframes css {
  to {
    stroke-dashoffset: 160px;
  }
}
<div class="item html">
    <h2>HTML</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

<div class="item css">
    <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>

Upvotes: 1

Related Questions