I.E 11 上的 SVG 动画答案

【问题标题】：SVG animation on I.E 11I.E 11 上的 SVG 动画
【发布时间】：2020-06-30 09:35:57
【问题描述】：

我在 Angular 8 应用程序上有一个 svg 动画，一个 svg 圆圈在 chrome 和 mozilla 上工作正常，但在 IE 11 上不起作用。有什么想法让它也能在那里工作吗？如何将我的 css 更改为也可以在 IE 11 上工作？感谢您的关注。期待您的回复。

我在标题中添加了 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>

【问题讨论】：

这能回答你的问题吗？ SVG animation is not working on IE11

标签： css internet-explorer svg-animate

【解决方案1】：

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

作为一种解决方法，我建议您可以尝试使用 div 来显示圆圈，而不是 SVG，请参考以下示例：CSS3 Circle loader One Time around 和 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" />

结果如下：

【讨论】：

【解决方案2】：

因为document mode

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

【讨论】：

对不起，我没有在我的帖子中提到它。我正在使用这个元数据。
np，doctype 呢？你能分享一下html文件的开头吗？