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

Question

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

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

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

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

Answer 1

确实是个奇怪的错误。在包装 g 元素中执行转换作为 SVG 转换并不能解决问题。

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

https://jsfiddle.net/qe00s1mg/