SVG transform="rotate(x,x,x)" 在 iOS 上不起作用答案

【问题标题】：SVG transform="rotate(x,x,x)" not working on iOSSVG transform="rotate(x,x,x)" 在 iOS 上不起作用
【发布时间】：2016-10-12 16:11:13
【问题描述】：

我创建了一个 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 设备上实现这一点吗？

【问题讨论】：

【解决方案1】：

Greensock 回复了我的推文并解释说 iOS 以相反的方向绘制圆圈，因此一种解决方案是使用 <path> 而不是 <circle>。（他们还提到MorphSVGPlugin.convertToPath()http://greensock.com/morphSVG`）也可以做到。

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

【讨论】：

【解决方案2】：

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

这对您来说可能不是问题，但认为这值得在这里发布，因为这可能是轮换在 iOS 中不起作用的原因之一。

【讨论】：