极端旋转时抗锯齿效果差

Question

我正在使用以下代码在 X 轴上旋转 SVG：

img {
    width:1000px;
    margin:0 auto;
    transform: perspective(600px) rotateX(80deg)
}

SVG 中的星星最终看起来非常像素化：http://codepen.io/maxedison/pen/zGOyRO

有什么方法可以改善抗锯齿吗？我在 Chrome 和 Firefox 中都看到了这一点。我尝试设置 backface-visibility: hidden 但这没有任何区别。我也尝试过使用旗帜图像的 JPG 而不是 SVG，同样的问题也出现在那里。

Answer 1

这是一个很好的问题。老实说，我在这里想不出一个好的解决方案。我唯一想到的 "trick" 就是模糊你的形象？

-webkit-filter: blur(0.8px);

并针对图像的渲染模式优化质量？

Poor anti-aliasing on extreme rotation