SVG 在 Safari 10 中旋转时改变颜色

Posted 2023-03-05

【中文标题】SVG 在 Safari 10 中旋转时改变颜色

【英文标题】：SVG changes color when rotated in Safari 10

【发布时间】：2017-01-30 22:21:18

【问题描述】：

我刚刚遇到了一个仅在 Safari 10 中出现的非常奇怪的问题。我有扑克牌、svg 图像，有时会使用 transform:rotate(xdeg) 旋转。

我使用的卡有一个红色的方块图案。当它不旋转或以直角旋转时，即 90、180、270，那么它看起来是正常的。但是，除此之外的任何其他角度，背景图案都会变成蓝色！我刚刚从我的一个用户那里得到了一份关于此的报告，并且从未见过任何奇怪的事情。其他浏览器都正常，Safari 9正常。

我猜这只是 Safari 10 中一个非常奇怪的错误，但是关于如何解决它的任何想法？我在以下位置创建了一个最小复制：

https://jsfiddle.net/2zv4garu/1/

【问题讨论】：

如果您认为这与 WebKit 相关，请考虑添加一个 WebKit 错误 to their bug tracker。

这不会发生在我的 Mac Mini 2012 年末机型或我的 2013 Retina MacBook Pro 上。 Mac Mini：imgur.com/zdAZoWV

在我的 Safari 版本 10.0 (12602.1.50.0.10) 的非视网膜 MacBook Pro Late 11 上不会发生这种情况

Sierra, iMac 2015 年末也不会发生 - imgur.com/a/e2FyS

无法在 ios 10.0.1 上的 Safari 中重现。

【参考方案1】：

确实很奇怪。在将 g 元素包装为 SVG 转换时执行转换并不能解决问题。

但是，通过执行 3D 旋转而不是 2D 旋转，即inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)'; 确实可以解决问题，您可以在此处查看。

https://jsfiddle.net/qe00s1mg/

【讨论】：

谢谢，效果很好 :) 我弄清楚了颜色变化是如何发生的，它正在从填充颜色切换 R 和 B 值。颜色是#ff0000，它正在切换到#0000ff。我尝试使用不同的 R 和 B 值，发现它总是相反。然而 G 值是不变的，事实上如果你尝试颜色#00FF00，卡片颜色在旋转过程中不会改变。无论如何，感谢您的解决方法，我已将此答案标记为已接受。

请在 bugreport.apple.com（或 bugs.webkit.org）提交错误并提供这些详细信息。

@EinarEgilsson：……这几乎解释了正在发生的事情。很明显，在渲染旋转图像时，某人的using the wrong byte order。

@PaulSchreiber 实际上它看起来已经被修复了，拥有更新版本 Safari 10 的人似乎没有得到这个。

@DarioOO 因为一半正确总比不尝试好。