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

Question

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

我用的这张卡上有红色的方块图案。当它没有旋转，或者以直角旋转，即90,180,270，那么它看起来是正常的。但是，任何其他角度超过这个角度，背景图案都会变成蓝色！我刚从我的一个用户那里得到了一份关于这方面的报告，从来没有见过这么奇怪的事情。其他浏览器都能正常工作，Safari9也能正常工作。

我猜这只是Safari10中的一个非常奇怪的bug，但是有没有办法解决这个问题呢？我在以下位置创建了一个最小的repro：

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

Answer 1

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

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

https://jsfiddle.net/qe00s1mg/

​

​