Animiere SVG Element Transformation (Drehen & Skalieren) in IE

Question

Ich habe eine Animation (transform + transition) eines SVG-Elements (ein Pfeil) dreht sich um einen Kreis (manchmal mit Skala). Es funktioniert in den neuesten Chrome, Opera, Firefox (Safari habe ich nicht getestet, aber ich nehme an, es funktioniert auch dort). Aber es funktioniert nicht im IE, da die Transformation für das SVG-Element dort mit dem Attribut transform gesetzt werden muss. Also habe ich meinem Skript eine Zeile hinzugefügt, die die gleiche Transformation auf das Attribut anwendet, aber die Animation passiert nicht, sie "springt" einfach an die neue Position.

Ich habe eine JSfiddle Demo gemacht - https://jsfiddle.net/rv28ezfw/3/ In IE wird die Rotation/Skalierung nicht animiert, und ich muss einen Weg finden, das zu beheben.

Gibt es ein Plugin oder eine Funktion, die sich um die Animation in IE kümmert? Vorzugsweise ohne Anpassung der Funktionalität, die bereits überall sonst funktioniert.

Ich schaute auf eine jQuery SVG plugin und CSS Tricks.com haben eine (ganz am Ende des Artikels), die in IE funktioniert auch, aber ich war die Hoffnung für etwas einfacheres. Aber wenn Sie den einen oder anderen Kranken empfehlen, gehen Sie damit um.

Answer 1

Ich konnte nicht herausfinden, warum es in IE11 nicht funktionierte. Stattdessen ist hier eine Abhilfe:

$('#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>

Grundsätzlich drehe ich #container statt des SVG selbst. Dann ging es darum, die transform s auf #container zu verschieben.

Da wir eine div drehen, können die Ecken Elemente darunter überlappen. In dieser Demo habe ich es transparent gemacht, aber die Grenzen umrissen, damit du sie sehen kannst. Aufgrund von pointer-events: none wird der Benutzer nicht daran gehindert, auf die Schaltfläche "GO" zu klicken, wenn eine Ecke der div diese überlappt.

Sie könnten auch Ihr SVG ein wenig ändern, so dass nicht so viel Leerraum um das Symbol herum ist.