IE11 SVG преобразование: перевод не работает - PullRequest
Новая
       0

IE11 SVG преобразование: перевод не работает

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

Я хочу оживить круг 

@keyframes animation {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
  }
}

.circle {
  animation: animation 1s ease-in;
  fill: #ff0000;
}
<svg class="parent" width="500px" height="500px" viewBox="0 0 500 500">
  <circle class="circle" r="150" cx="150" cy="150"></circle>
</svg>

Анимация непрозрачности прошла успешно, а анимация преобразования (перевода) не удалась.

Есть идеи, как решить эту проблему?

Ответы [ 2 ]

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

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

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

<head>
<style> 
div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;-webkit-transform: translate(0, 0); transform: translate(0, 0);opacity: 0;}

  100% {background-color:red;  -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%);opacity: 1;}
}
</style>
</head>
<body> 
<div></div>

</body>

Вывод, как показано ниже (используйте браузер IE 11):

enter image description here

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

IE 11 может поддерживать атрибут transform, но он не распознает стиль CSS (и, следовательно, также не содержит CSS таблиц стилей или анимации).

Будет не работать в IE11: 

<circle style="transform:translate(50%, 50%)"></circle>

Будет работать в IE11: 

<circle transform="translate(50%, 50%)"></circle>

У меня четыре Решения для вас:

  • Go трудный путь: анимируйте изменения с помощью jQuery вручную, используя var circles = jQuery('.circle');, чтобы получить круги, circles.attr('transform', 'translate('+n+'%, '+n+'%)');, чтобы установить атрибут, и jQuery.animate(...), чтобы получить шаги анимации.
  • Обрабатывать анимацию с помощью атрибутов width и height.
  • Измените анимацию, если IE11.
  • Отключите поддержку IE11 для этой функции или ваш дырочный сайт.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...