I.E 11 上的 SVG 动画

Question

我在 angular 8 应用程序上有一个 svg 动画，一个 svg 圆圈在 chrome 和 mozilla 上工作正常但在 I.E 11 上不工作。任何想法如何让它工作还有吗？我怎样才能改变我的 css 以在 I.E 11 上工作呢？感谢您的关注。期待您的回复。

我在 header:

上添加了 IE 元数据

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

直播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>

Answer 1

因为document mode

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

Answer 2

IE浏览器不支持对SVG元素进行CSS变换，更多详细信息请查看this article。

作为解决方法，我建议您可以尝试使用 div 来显示圆，而不是 SVG，请参考以下示例：CSS3 Circle loader One Time around and CSS circle loader

代码如下：

<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代码：

</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>

结果是这样的：

此外，还有一个选择，我们可以制作一个.gif图片来显示SVG动画，然后使用标签来显示它。像这样：<img src="https://i.stack.imgur.com/9CFNg.gif" width="100" height="100" />

结果是这样的：

I.E 11 上的 SVG 动画

SVG animation on I.E 11

css

internet-explorer

svg-animate