CSS3 Rotation in SVG: Firefox ignoriert Ursprung

Question

Ich arbeite mit einer SVG-Ausgabe von Adobe Illustrator. Es ist ziemlich groß, aber ich habe das Problem in ein JSFiddle gebracht.

Hier ist die Demo

.cls-3, .cls-4{ 
 
    fill: none; 
 
} 
 

 
.cls-12, .cls-4 { 
 
    stroke: #85bce6; 
 
} 
 
.cls-4 { 
 
    stroke-width: 17.8918px; 
 
} 
 

 
.spin { 
 
    animation-duration: 5.0s; 
 
    animation-timing-function: linear; 
 
    animation-iteration-count: infinite; 
 

 
    -webkit-transform-origin: 50% 50%; 
 
    -moz-transform-origin: 50% 50%; 
 
    -ms-transform-origin: 50% 50%; 
 
    -o-transform-origin: 50% 50%; 
 
    transform-origin: 50% 50%; 
 

 
    display: inline-block; 
 
} 
 

 
.spin.right { 
 
    animation-name: spin-right; 
 
} 
 
.spin.fastest { 
 
    animation-duration: 2.0s; 
 
} 
 

 
@keyframes spin-right { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="300 100 900 600"> 
 
    <g> 
 
    <g class="spin right fastest"> 
 
     <circle class="cls-3" cx="763.662" cy="401.0772" r="287.6463" transform="translate(-63.9564 644.1622) rotate(-44.0769)"/> 
 
     <path class="cls-4" d="M997.0074,232.74a286.59,286.59,0,0,1,52.6308,199.8731c-17.44,157.9025-159.5825,271.77-317.485,254.3307a287.6266,287.6266,0,0,1-254.33-317.4848"/> 
 
    </g> 
 
    </g> 
 
</svg>

Das Problem hierbei ist, dass die Drehung aussieht und funktioniert gut in Blink und WebKit-fähigen Browsern. Aber wenn es um Mozilla geht, scheint es entweder die Herkunft zu ignorieren, die ich in der CSS gesetzt habe, oder es geht mit seiner eigenen vorhergesagten Herkunft verrückt.

Nicht ganz sicher, wie man dieses genau repariert, wie mein SVG viele Elemente hat, die von verschiedenen Größen gedreht werden müssen.

Wer hat irgendwelche Ideen?

---

Außerdem weiß ich nicht für jemand anderes, aber wenn ich an diese in MS Rand schauen die Rotation einfach nur nicht geschieht. Ich würde mich freuen zu erfahren, ob es für jeden Edge-fähigen Benutzer da draußen funktioniert.

Answer 1

Aufbauend auf Robert Kommentar (was ich gebe war mir neu.) Aus dem transforms draft spec:

Für SVG-Elemente ohne zugehörigen CSS-Layout-Box die horizontalen und vertikalen Versatz ein Versatz von dem Punkt darstellen Ursprung des lokalen Koordinatenraums des Elements.

Das bedeutet, dass der Transformationsursprung für SVG-Elemente nicht relativ zur Begrenzungsbox jedes Elements berechnet wird (wie im regulären HTML-DOM/CSS). Sie werden wahrscheinlich eine Javascript-Lösung benötigen.