SVG 变换="rotate(x,x,x)" 无法在 iOS 上工作

Question

我创建了一个带有圆圈的 Greensock 动画，该圆圈绘制 90% 并旋转，以便文本可以放置在圆圈的间隙中。除了 iOS 设备外，它在任何地方都适用。（见下面的代码笔）

我知道 iOS 仍然需要 -webkit 前缀，如这个问题 Transform not Working on IOS 中所述，所以我在 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 在相反方向绘制圆圈，因此一种解决方案是使用 <path> 而不是 <circle>。（他们还提到 MorphSVGPlugin.convertToPath() http://greensock.com/morphSVG`）也可以做到。

他们包括一个完美运行的代码笔。 http://codepen.io/sumnercreations/pen/EgRovE

Answer 2

一个可能的问题是 iOS 中的错误似乎忽略了 90 度的倍数的旋转。我发现它可以通过简单地使用一个稍微偏离的值（例如 89.9 度）来修复。

这对您来说可能不是问题，但认为这值得在此处发布，因为这是轮换在 iOS.

中不起作用的可能原因之一

SVG transform="rotate(x,x,x)" not working on iOS