SVG анимация на IE 11 - PullRequest
Новая
       58

SVG анимация на IE 11

0 голосов
/ 19 марта 2020

У меня есть svg-анимация в приложении angular 8, svg круг, который отлично работает на chrome и mozilla, но не работает в IE 11. Есть идеи, как заставить его работать там тоже? Как я могу это сделать? изменить мой css для работы на IE 11 тоже? Спасибо за внимание. Я с нетерпением жду вашего ответа.

Я добавил мета для IE в заголовок: 

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

Live пример 

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

Ответы [ 2 ]

1 голос
/ 20 марта 2020

Браузер IE не поддерживает CSS преобразования для элементов SVG, более подробную информацию, пожалуйста, проверьте эту статью .

В качестве обходного пути, я предлагаю вам попробовать отобразите кружок, используя div вместо SVG, пожалуйста, обратитесь к следующим примерам: CSS3 Круговой загрузчик Один раз вокруг и CSS Круговой загрузчик

Код, как показано ниже : 

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

Результат, подобный следующему:

enter image description here

Кроме того, у нас есть другой выбор: мы можем сделать изображение .gif, чтобы показать SVG-анимацию, а затем использовать тег для его отображения. Вот так: <img src="https://i.stack.imgur.com/9CFNg.gif" width="100" height="100" />

Результат такой:

enter image description here

0 голосов
/ 19 марта 2020

Из-за document mode

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