SVGトランスフォーム= "rotate（x、x、x）"がiOSで動作しない

Question

私は90％を描画する円でGreensockアニメーションを作成し、サークルのギャップにテキストを配置できるようにしました。どこでも動作しますが、iOSデバイスで動作します。

http://codepen.io/sumnercreations/pen/KgRJzZ

私はこの質問Transform not Working on IOSに記載されているようにiOSのは、まだ、-webkit接頭辞が必要であることを知っている（codepen下記参照）ので、私は、SVGコードで、それはまだ動作しないと付け加えました。

CSS Tricksはこれがどこでもうまくいくと言いますが、私にはうまくいかないと言います。 https://css-tricks.com/transforms-on-svg-elements/

<!-- works everywhere --> 
<rect x='65' y='65' width='150' height='80' transform='rotate(45)' /> 

iOSデバイスでこれを達成する方法はありますか？

Answer 1

Greensockが私のつぶやきに返信し、iOSが逆の方向に円を描くと説明されているので、<circle>の代わりに<path>を使用することをお勧めします。 （彼らはまたMorphSVGPlugin.convertToPath()http://greensock.com/morphSVG `）もそれを行うことができると述べた。

完全に機能したコードペンが含まれていました。 http://codepen.io/sumnercreations/pen/EgRovE

Answer 2

可能性のある問題の1つは、90度の倍数で回転を無視するようなiOSのバグです。私はそれが単に分数的にオフだった値（例えば89.9度）を使うことで修正可能であることが分かった。

これは問題ではないかもしれませんが、これはiOSで動作しないローテーションの理由の1つで、ここに投稿する価値があると考えました。