animateTransform не работает в IE 11

Я новичок в анимации svg, а ниже - мой код для анимации (перемещение вверх и вниз) линии над другой строкой. Это отлично работает в Mozilla и Chrome, но не работает в IE 11. Может ли кто-нибудь помочь мне с тем, что мне не хватает. ?animateTransform не работает в IE 11

<!DOCTYPE html> 
 
<html> 
 
<head><title></title> 
 

 
</head> 
 
<body> 
 
\t <svg height="210" width="500"> 
 
\t <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
\t <line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2"> 
 
\t \t <animateTransform attributeName="transform" 
 
     type="translate" 
 
     values="200 200;-150 -150;200 200" 
 
     begin="0s" 
 
     dur="5s" 
 
     repeatCount="indefinite" 
 
    /> 
 
\t </line> 
 
\t </svg> 
 

 

 
\t 
 
</body> 
 
</html>

источник

2016-06-13 Anusha Sajeendran

IE не поддерживает SMIL. Вы можете добавить поддержку, используя [fakeSmile] (https://leunen.me/fakesmile/), хотя –

Является ли хорошей практикой использование или есть ли какая-либо замена для этого, так как добавление библиотек (fakesmile) увеличивает загрузку время.? –

Вы можете написать свою собственную анимационную библиотеку, я полагаю. –

IE и края не отображаются для поддержки SMIL или CSS трансформирует; атрибут преобразования должен быть установлен для того, чтобы иметь влияние на положение перевода, поворот/ориентацию или перекос и т. д.

Как ни странно, javascript способен вычислять прикладные преобразования с использованием CSS, включая анимацию части, которая использует либо ключевые кадры, либо эффекты перехода, даже если они не отображаются в браузере. Имея это в виду, вы можете дать своей строке какую-то форму идентификатора, оживить ее с помощью css, а затем применить атрибут transform вручную каждые 50 мс (~ 20 кадров в секунду).

<svg height="210" width="500"> 
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line> 
<line id="line" x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2"></line> 
</svg> 

<style> 
    // Switch to CSS Animations 
    @-webkit-keyframes line-animate { 
     0% { 
      -webkit-transform: translate(200px, 200px); 
        transform: translate(200px, 200px); 
     } 
     50% { 
      -webkit-transform: translate(-150px, -150px); 
        transform: translate(-150px, -150px); 
     } 
     100% { 
      -webkit-transform: translate(200px, 200px); 
        transform: translate(200px, 200px); 
     } 
    } 
    @keyframes line-animate { 
     0% { 
      -webkit-transform: translate(200px, 200px); 
        transform: translate(200px, 200px); 
     } 
     50% { 
      -webkit-transform: translate(-150px, -150px); 
        transform: translate(-150px, -150px); 
     } 
     100% { 
      -webkit-transform: translate(200px, 200px); 
        transform: translate(200px, 200px); 
     } 
    } 
    #line { 
     -webkit-animation: line-animate 5s linear infinite; 
       animation: line-animate 5s linear infinite; 
    } 
</style> 
<script> 
    (function(){ 
     var line = document.getElementById('line'); 
     // Iterative function 
     line.animate = function() { 
      // Set the line transform attribute to match the calculated CSS transform value. 
      line.setAttribute('transform', getComputedStyle(line).getPropertyValue('transform')); 
      setTimeout(line.animate, 50); 
     }; 
     line.animate(); 
    })(); 
</script>

Примечание относительно этого подхода

браузеров, которые считывают CSS анимацию и преобразующими правильно может вызвать компаундирование проблемы при преобразовании атрибута установлено, так что было бы лучше, чтобы добавить некоторые обнаружения браузера для IE. Несмотря на это, большинство браузеров будут игнорировать атрибут преобразования при применении преобразования стиля.
Если элемент SVG, который требуется оживить, уже имеет атрибут преобразования, тогда вам нужно будет преобразовать все точки, расстояния и пути в преобразованные значения.
Значения преобразования должны быть пересчитаны для анимаций SMIL, которые используют добавление.
Возможно, необходимо ограничить количество анимированных элементов, чтобы предотвратить проблемы с производительностью браузера, так как я ожидаю, что getComputedStyle будет достаточно ресурсоемким.

источник

2018-02-21 04:43:58

ответ

Смежные вопросы