IE内のSVG要素の変換（回転とスケール）

Question

SVG要素（矢印）のアニメーション（矢印）がサークル（時には縮尺）を中心に回転しています。それは最新のクロム、オペラ、Firefoxで動作します（Safariはテストされていませんが、そこでも動作します）。 SVG要素の変換にはtransform属性を設定する必要があるため、IEでは動作しません。だから、属性に同じトランスフォームを適用するスクリプトに行を追加しましたが、アニメーションは起こらず、単に新しい位置にスキップします。

私はJSfiddleデモを作成しました - https://jsfiddle.net/rv28ezfw/3/ IEでは回転/スケールがアニメーション化されないため、修正する方法を見つける必要があります。

私のためにIEのアニメーションを世話するプラグインや機能がありますか？私はjQuery SVG pluginを見ていて、CSS Tricks.comはdemo（記事の一番下にあります）がIEでも動作していますが、私は希望でしたもっとシンプルなもののために。しかし、もしあなたがどちらか他の人にそれを勧めたら

Answer 1

なぜ私はIE11で動作していないのか分かりませんでした。代わりに、ここでの回避策です：

$('#btn').click(function() { 
 
    // Changed to make demo smoother. 
 
    $('#container').toggleClass('rotated'); 
 
});

#container { 
 
    /* Resized so it looks better in snippet */ 
 
    width: 300px; 
 
    height: 300px; 
 
    /* So you can see what's going on */ 
 
    border: 1px solid black; 
 
    /* Changed to make it transparent, otherwise you may cover other elements */ 
 
    background: rgba(0,0,0,0); 
 
    /* So any elements underneath can still receive events */ 
 
    pointer-events: none; 
 
    /* Moved here from svg */ 
 
    transition: all 1.5s ease; 
 
} 
 
/* Added */ 
 
#container.rotated { 
 
    transform: rotate(45deg); 
 
} 
 

 
#btn { 
 
    padding: 10px; 
 
    color: #fff; 
 
    text-align: center; 
 
    background: green; 
 
} 
 

 
.cls-1 { 
 
    fill: #2bffaa; 
 
} 
 

 
.cls-2 { 
 
    fill: #ccc; 
 
} 
 

 
.cls-3 { 
 
    fill: #f2f2f2; 
 
} 
 

 
.cls-4 { 
 
    fill: #ddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="btn">GO</div> 
 
<div id="container"> 
 
    <svg id="scroller" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480"> 
 
    <title>demo</title> 
 
    <path id="scroller__outer" class="cls-1" d="M240,147a92.93,92.93,0,0,0-28.29,4.39l5.14,12A80.1,80.1,0,1,1,179.23,188L132.31,226.4c13.11,3.06,15.18,4.06,15.18,4.06S147,236.78,147,240A93,93,0,1,0,240,147Z" /> 
 
    <path id="scroller__inner" class="cls-2" d="M240,158a84.78,84.78,0,0,0-23.82,3.86l1.76,4.13,6.59,15,0.68,1.44A59.46,59.46,0,1,1,190.56,207l-0.92-1.44-9.17-15.41L179.23,188c-12,14-21.22,32.14-21.22,52,0,44.18,37.82,82,82,82s82-37.82,82-82S284.18,158,240,158Z" 
 
    /> 
 
    <circle id="scroll__inner__circle" class="cls-3" cx="240" cy="240" r="51.5" /> 
 
    <path id="scroll__inner__outline" class="cls-4" d="M240,179a61,61,0,1,0,61,61A61,61,0,0,0,240,179Zm0,117a56,56,0,1,1,56-56A56,56,0,0,1,240,296Z" /> 
 
    </svg> 
 
</div>

基本的に、私は#containerの代わりに、SVG自体を回転させます。それから、transformを#containerに移動することが問題でした。

divを回転しているため、コーナーは下の​​要素と重なることがあります。このデモでは、私はそれを透明にしましたが、あなたがそれらを見ることができるように、境界を説明しました。 pointer-events: noneのために、divの角が重なっていると、ユーザーは「GO」ボタンをクリックできません。

SVGを少し変更して、アイコンの周りに空白があまりないようにすることもできます。