animateTransformがIE 11で機能しない

私はsvg animationを初めて使用しています。以下は、別の行の上にアニメーションを作成する（上下に動かす）コードです。これは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/）時間。？ –

私が推測するあなた自身のアニメーションライブラリを書くことができます。 –

IEとエッジは、SMILやCSS変換をサポートするためには表示されません。変換/位置、回転/向き、またはスキューなどに影響を与えるために変換属性を設定する必要があります。

奇妙なことに、JavaScriptを使用して適用された変換を計算することができますブラウザでレンダリングされていない場合でも、キーフレームまたはトランジションエフェクトのいずれかです。これを念頭に置いて、あなたの行に何らかの形式の識別子を与え、cssを使ってそれをアニメートし、50ms（毎秒〜20フレーム）ごとに手動で変換属性を適用することができます。このアプローチにCSSアニメーションを読んで、正しく変換属性が設定されているので、それはまたのためのいくつかのブラウザ検出を追加するのがベストだろう際の問題を配合引き起こす可能性が変換

ブラウザに関する

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

ノートIE。それにかかわらず、スタイル変換が適用されると、ほとんどのブラウザは変換属性を無視します。

アニメーション化するSVG要素に既に変換属性がある場合は、すべての点、距離、およびパスを変換された値に変換する必要があります。

追加を使用するSMILアニメーションの変換値を再計算する必要があります。

getComputedStyleはかなりリソースを消費すると予想されるため、ブラウザのパフォーマンスに関する問題を回避するために、アニメーション化される要素の数に制限を設定する必要があります。

出典

2018-02-21 04:43:58

animateTransformがIE 11で機能しない

答えて

関連する問題