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

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

我用的卡片上有红色方块图案。如果它没有旋转，或者没有以直角旋转，比如90,180,270，那么它看起来就是正常的。但是，除此之外的任何角度和背景图案都会变成蓝色！我刚收到一个用户的报告从没见过这么奇怪的东西。其他浏览器运行正常，Safari 9运行正常。

我猜这只是 Safari 10中的一个非常奇怪的 bug，但是有什么办法可以解决这个问题吗？我创造了一个最小的复制品:

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

14665 次浏览

小开

最佳答案

Weird bug indeed. Performing the transformation in wrapping g element as an SVG transform does not resolve the issue.

However, by performing a 3D rotation instead of of a 2D one, i.e. inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)'; does resolve the issue, you can see here.

https://jsfiddle.net/qe00s1mg/