SVG animation on I.E 11

Question

I have an svg animation on an angular 8 app,an svg circle whick working fine on chrome and mozilla but dosen't work on I.E 11. Any ideas how to make it work there too?How can i change my css to work on I.E 11 too? Thanks for your attention. I’m looking forward to your reply.

I have add meta for IE on my header:

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

Live example

   #countdown {
      position: relative;
      margin: auto;
      height: 40px;
      width: 40px;
      text-align: center;
    }
    
    #countdown-number {
      color: #1C5BA2;
      display: inline-block;
      line-height: 40px;
    }
    
    svg {
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 40px;
      transform: rotateY(-180deg) rotateZ(-90deg);
    }
    
    svg circle {
      stroke-dasharray: 113px;
      stroke-dashoffset: 0px;
      stroke-linecap: round;
      stroke-width: 2px;
      stroke: #1C5BA2;
      fill: none;
      -webkit-animation: countdown 31s linear forwards;
      animation: countdown 31s linear forwards;
    }
    
    @keyframes countdown {
      from {
        stroke-dashoffset: 0px;
      }
      to {
        stroke-dashoffset: 113px;
      }
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row mt-5">
    <div class="col">
      <div id="countdown">
        <div id="countdown-number"></div>
          <svg>
            <circle r="18" cx="20" cy="20"></circle>
          </svg>
       </div>
    </div>
  </div> 
</div>

my index

<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>App Name</title>
 <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

 </head>
 <body>
 <app-root></app-root>
 </body>
 </html>

Does this answer your question? [SVG animation is not working on IE11](https://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11) — Cray, Mar 19 '20 at 09:16

score 1 · Accepted Answer · answered Mar 20 '20 at 08:52

The IE browser does not support CSS transforms on SVG elements, more detail information, please check this article.

As a workaround, I suggest you could try to display the circle using div, instead of SVG, please refer to the following samples: CSS3 Circle loader One Time around and CSS circle loader

Code as below:

<style>
    body {
        background: white;
    }

        body #container {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            padding: 50px;
        }

            body #container #circle-loader-wrap {
                overflow: hidden;
                position: relative;
                margin-top: -10px;
                width: 200px;
                height: 200px;
                box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
                background-color: rgb(0, 148, 255,0.15);
                border-radius: 200px;
                -ms-transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                transform: rotate(180deg);
            }

                body #container #circle-loader-wrap:after {
                    content: '';
                    position: absolute;
                    left: 15px;
                    top: 15px;
                    width: 170px;
                    height: 170px;
                    border-radius: 50%;
                    background-color: white;
                    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
                }

                body #container #circle-loader-wrap div {
                    overflow: hidden;
                    position: absolute;
                    width: 50%;
                    height: 100%;
                }

                body #container #circle-loader-wrap .loader {
                    position: absolute;
                    left: 100%;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: 1000px;
                    background-color: white;
                }

                body #container #circle-loader-wrap .left-wrap {
                    left: 0;
                }

                    body #container #circle-loader-wrap .left-wrap .loader {
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                        transform-origin: 0 50% 0;
                        -webkit-transform-origin: 0 50% 0;
                        animation: loading-left 31s infinite linear;
                        -webkit-animation: loading-left 31s infinite linear;
                    }

                body #container #circle-loader-wrap .right-wrap {
                    left: 50%;
                }

                    body #container #circle-loader-wrap .right-wrap .loader {
                        left: -100%;
                        border-bottom-right-radius: 0;
                        border-top-right-radius: 0;
                        transform-origin: 100% 50% 0;
                        -webkit-transform-origin: 100% 50% 0;
                        animation: loading-right 31s infinite linear;
                        -webkit-animation: loading-right 31s infinite linear;
                    }

    @keyframes loading-left {
        0% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(180deg);
        }

        50% {
            transform: rotate(180deg);
        }

        75% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(180deg);
        }
    }

    @-webkit-keyframes loading-left {
        0% {
            -webkit-transform: rotate(0deg);
        }

        25% {
            -webkit-transform: rotate(180deg);
        }

        50% {
            -webkit-transform: rotate(180deg);
        }

        75% {
            -webkit-transform: rotate(180deg);
        }

        100% {
            -webkit-transform: rotate(180deg);
        }
    }

    @keyframes loading-right {
        0% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(180deg);
        }

        75% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(180deg);
        }
    }

    @-webkit-keyframes loading-right {
        0% {
            -webkit-transform: rotate(0deg);
        }

        25% {
            -webkit-transform: rotate(0deg);
        }

        50% {
            -webkit-transform: rotate(180deg);
        }

        75% {
            -webkit-transform: rotate(180deg);
        }

        100% {
            -webkit-transform: rotate(180deg);
        }
    }

Html Code:

</style> 
    <div id="container">
        <div id="circle-loader-wrap">
            <div class="left-wrap">
                <div class="loader"></div>
            </div>
            <div class="right-wrap">
                <div class="loader"></div>
            </div>
        </div>
    </div>

The result like this:

Besides, there have another choice, we could make a .gif image to show the SVG animation, then, use tag to display it. Like this: <img src="https://i.stack.imgur.com/9CFNg.gif" width="100" height="100" />

The result like this:

score 0 · Answer 2 · answered Mar 19 '20 at 09:18

0

Because of document mode

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

answered Mar 19 '20 at 09:18

Manjuboyz

6,978
3
21
43

Sorry i didn't mention it on my post. I am using this meta. – Tzimpo Mar 19 '20 at 09:20
np, what about `doctype`? can you share the beginning of the html file? – Manjuboyz Mar 19 '20 at 09:21

SVG animation on I.E 11

2 Answers2