SVG 变换旋转 90、180 或 270 度在 Safari 中的圆上不起作用 iOS 10
SVG transform rotate by 90, 180 or 270 degrees not working on circle in Safari iOS 10
我想通过设置 stroke-dasharray 和变化 stroke-dashoffset 使用 SVG 圆形元素创建圆环图。 SVG 元素需要旋转 270（或 -90）度，以便图表 "bar" 从顶部开始。这是代码：
使用transform="rotate(270, 80, 80)"中的第一个数字指定旋转角度。
问题是：在 iOS 10 上的 Safari 中查看时，不应用此旋转。事实上，设置 90、180 或 270 度旋转没有任何效果。也不会应用相同的角度但为负（例如 -90）。
这是 fiddle 在 iOS 10.0.1 上的 Safari 中的屏幕截图：
在 iOS 9.3.5 上的 Safari 中也是如此 fiddle：
作为一种解决方法，我发现使用 270.1 度之类的东西可以解决问题，但是我想知道为什么 270 度不起作用，以及是否有更好的处理方法。
我在 iOS 10.1 和 Safari 10.0.1 上经历过这种痛苦。该错误肯定是由任何 rotate 值触发的，该值计算为可被 90 度整除的值。
但更奇怪的是：错误的存在受当前缩放级别的影响。
查看我整理的这个 demo/series 最小测试用例（jsFiddle 版本 here）。最好 运行 片段然后扩展到整页：
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>
如演示中所述，它似乎已在 iOS 10.2 中修复，至少在我刚刚下载的 public 测试版中是这样。据推测，Safari 修复也将在适当的时候到来。
iOS10.1
iOS 10.2（Public 测试版 2）
这也发生在我身上，我决定在过渡期间使用差一点被 90 度整除的旋转来解决这个问题。
确实，将旋转变换设置为 90.1deg 之类的值可以解决问题...
我测试了很多东西，在这里报告：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>
我想通过设置 stroke-dasharray 和变化 stroke-dashoffset 使用 SVG 圆形元素创建圆环图。 SVG 元素需要旋转 270（或 -90）度，以便图表 "bar" 从顶部开始。这是代码：
使用transform="rotate(270, 80, 80)"中的第一个数字指定旋转角度。
问题是：在 iOS 10 上的 Safari 中查看时，不应用此旋转。事实上，设置 90、180 或 270 度旋转没有任何效果。也不会应用相同的角度但为负（例如 -90）。
这是 fiddle 在 iOS 10.0.1 上的 Safari 中的屏幕截图：
在 iOS 9.3.5 上的 Safari 中也是如此 fiddle：
作为一种解决方法，我发现使用 270.1 度之类的东西可以解决问题，但是我想知道为什么 270 度不起作用，以及是否有更好的处理方法。
我在 iOS 10.1 和 Safari 10.0.1 上经历过这种痛苦。该错误肯定是由任何 rotate 值触发的，该值计算为可被 90 度整除的值。
但更奇怪的是：错误的存在受当前缩放级别的影响。
查看我整理的这个 demo/series 最小测试用例（jsFiddle 版本 here）。最好 运行 片段然后扩展到整页：
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>
如演示中所述，它似乎已在 iOS 10.2 中修复，至少在我刚刚下载的 public 测试版中是这样。据推测，Safari 修复也将在适当的时候到来。
iOS10.1
iOS 10.2（Public 测试版 2）
这也发生在我身上，我决定在过渡期间使用差一点被 90 度整除的旋转来解决这个问题。
确实，将旋转变换设置为 90.1deg 之类的值可以解决问题...
我测试了很多东西，在这里报告：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>