在Safari iOS 10中，SVG转换旋转90,180或270度不能在圆上工作

我想通过设置stroke-dasharray和不同的stroke-dashoffset来创build一个使用SVG圆元素的圆环图。 SVG元素需要旋转270（或-90）度，以使图表“栏”从顶部开始。 这里是代码：

http://jsfiddle.net/q3wb6gkq/

使用transform="rotate(270, 80, 80)"的第一个数字指定旋转angular度。

问题是：在iOS 10上的Safari中查看时，此旋转不适用。 实际上，设置90,180或270度旋转不起作用。 相同的angular度，但负面（例如-90）也不适用。

下面是iOS 10.0.1上的Safari上的一个小屏幕截图：

这里是在iOS 9.3.5 Safari浏览器相同的小提琴：

作为一种解决方法，我发现使用像270.1度这样的东西解决了这个问题，但是我想知道为什么270不能正常工作，是否有更好的方法来处理它。

Answer 1

我在iOS 10.1和Safari 10.0.1上经历过这样的痛苦。 这个错误肯定是由任何一个计算值可以被90度整除的rotate值触发的。

但它变得更加怪异。

看这个演示/一系列最小的testing案例我放在一起（jsFiddle版本在这里 ）。 最好运行代码段，然后展开到整个页面：

 svg { height: 80px; width: 80px; } circle { fill: none; stroke-dasharray: 150; stroke-width: 4px; stroke: #6fdb6f; transform-origin: center center; } .degrot { transform: rotate(-90deg); } .degrot-offset { transform: rotate(-90.1deg); } .degrot-offset-more { transform: rotate(-92deg); } .turnrot { transform: rotate(-0.25turn); } .turnrot-offset { transform: rotate(-0.251turn); } svg[viewBox] circle { stroke-dasharray: 300; stroke-width: 8px; } svg[viewBox].scaledown circle { stroke-dasharray: 300; stroke-width: 8px; } svg[viewBox].noscale circle { stroke-dasharray: 150; stroke-width: 4px; } svg[viewBox].scaleup circle { stroke-dasharray: 75; stroke-width: 2px; } .wc { will-change: transform; } /* Demo prettification */ p:last-child { margin-bottom: 0; } td { padding: 10px; } tr td:first-of-type { width: 80px; min-height: 80px; } tr + tr td { border-top: 1px solid #dcdcdc; } 

 <table> <tr><td colspan="2">In Safari 10.0.1 and iOS 10.1, strange behavior can be observed on SVG shapes with <code>rotate</code> values not divisible by 90 degrees, when <code>transform-origin: center center;</code></td></tr> <tr> <td> <svg xmlns="http://www.w3.org/2000/svg"> <circle class="degrot" r="35" cy="40" cx="40" /> </svg> </td> <td> <code>transform: rotate(-90deg);</code> <p>The stroke improperly begins <a href="https://www.w3.org/TR/SVG11/shapes.html#CircleElement">at 3:00</a>, as if the <code>transform</code> rule hadn't been applied.</p> </td> </tr> <tr> <td> <svg xmlns="http://www.w3.org/2000/svg"> <circle class="degrot-offset" r="35" cy="40" cx="40" /> </svg> </td> <td> <code>transform: rotate(-90.1deg);</code> <p>The stroke begins at (twelve seconds before) 12:00, as expected.</p> </td> </tr> <tr> <td> <svg xmlns="http://www.w3.org/2000/svg"> <circle class="turnrot" r="35" cy="40" cx="40" /> </svg> </td> <td> <code>transform: rotate(-0.25turn);</code> <p>The same bug applies to any <code>rotate</code> value which computes to a multiple of 90 degrees.</p> </td> </tr> <tr> <td> <svg xmlns="http://www.w3.org/2000/svg"> <circle class="turnrot-offset" r="35" cy="40" cx="40" /> </svg> </td> <td> <code>transform: rotate(-0.251turn);</code> <p>43 seconds before noon.</p> </td> </tr> <tr><td colspan="2">But when the SVG element specifies a <code>viewBox</code> which is being scaled down, things can get weird:</td></tr> <tr> <td> <svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"> <circle class="degrot" r="70" cy="80" cx="80" /> </svg> </td> <td> <code>transform: rotate(-90deg);</code> <p>So far, so the same.</p> </td> </tr> <tr> <td> <svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"> <circle class="degrot-offset" r="70" cy="80" cx="80" /> </svg> </td> <td> <code>transform: rotate(-90.1deg);</code> <p>But now, offsetting by a little bit doesn't work, <em>unless</em> you zoom in the page in past a certain zoom threshold (either via pinching, or <code>View > Zoom</code> and/or keyboard shortcut). Try it; it's unsetting!</p> <p>This is probably because of some rounding of that the zooming engine performs, because...</p> </td> </tr> <tr> <td> <svg viewBox="0 0 160 160" class="scaledown" xmlns="http://www.w3.org/2000/svg"> <circle class="degrot-offset-more" r="70" cy="80" cx="80" /> </svg> </td> <td> <code>transform: rotate(-92deg);</code> <p>offsetting by a larger amount restores expected behavior.</p> </td> </tr> <tr><td colspan="2">If the SVG element is not being scaled <em>down</em>, behavior identical to the first section resumes. Zooming has no effect:</td></tr> <tr> <td> <svg viewBox="0 0 80 80" class="noscale" xmlns="http://www.w3.org/2000/svg"> <circle class="degrot" r="35" cy="40" cx="40" /> </svg> <svg viewBox="0 0 40 40" class="scaleup" xmlns="http://www.w3.org/2000/svg"> <circle class="degrot" r="17.5" cy="20" cx="20" /> </svg> </td> <td> <code>transform: rotate(-90deg);</code> <p> Top: No scaling (viewBox dimensions match parent element's)<br><br> Bottom: Scaling up (viewBox dimensions half of parent element's) </p> </td> </tr> <tr> <td> <svg viewBox="0 0 80 80" class="noscale" xmlns="http://www.w3.org/2000/svg"> <circle class="degrot-offset" r="35" cy="40" cx="40" /> </svg> <svg viewBox="0 0 40 40" class="scaleup" xmlns="http://www.w3.org/2000/svg"> <circle class="degrot-offset" r="17.5" cy="20" cx="20" /> </svg> </td> <td> <code>transform: rotate(-90.1deg);</code> <p> Top: No scaling (viewBox dimensions match parent element's)<br><br> Bottom: Scaling up (viewBox dimensions half of parent element's) </p> </td> </tr> <tr><td colspan="2">But there is one exception:</td></tr> <tr> <td> <svg class="degrot wc" xmlns="http://www.w3.org/2000/svg"> <circle r="35" cy="40" cx="40" /> </svg> </td> <td> <p>On the parent <code>svg</code> element:</p> <code>transform: rotate(-90deg);<br>will-change: transform;</code> <p>Iff the the the rotation is applied to a <em>parent</em> of the SVG shape (including the SVG element itself) along with the rule <code>will-change: transform</code>, all rotation values work as expected.</p> </td> </tr> <tr><td colspan="2">All these behaviors have been observed in Safari 10.0.1 and iOS 10.1. They appear to be fixed as of iOS 10.2 Beta 2.</td></tr> </table> 

Answer 2

的确，将旋转转换设置为像90.1deg解决了问题…

我已经testing了很多东西，报告在这里： https : //codepen.io/KevinNTH/pen/ZBgKdG

 <!-- workaround ios --> <svg class="wka-ios"> <g transform="rotate(-90.1 30 30)"> <circle cx="25" cy="25" r="15"/> </g> </svg> 

Answer 3

这一切都发生在我身上，我决定使用一个可以90度整除的旋转来解决这个问题。