极端旋转时抗锯齿效果不佳

【问题标题】：Poor anti-aliasing on extreme rotation极端旋转时抗锯齿效果不佳
【发布时间】：2015-04-20 17:01:21
【问题描述】：

我正在使用以下代码在 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，同样的问题也出现在那里。

【问题讨论】：

【解决方案1】：

这是一个很好的问题。老实说，我在这里想不出一个好的解决方案。我脑子里唯一冒出来的“窍门”就是模糊你的形象？

-webkit-filter: blur(0.8px);

以及为图片的渲染模式优化质量？

【讨论】：

顺便说一句，初始图像上的星星似乎已经像素化了。
图像是 SVG，不是像素。它在 Chrome 上看起来没有像素化upload.wikimedia.org/wikipedia/en/a/a4/…
是的，你是对的，因为你在这里有 100% 的规模。因此，如果您调整它的大小（高度或宽度），它会有点像素化；）。即使没有调整大小，在使用透视图时它看起来也是像素化的。很简单的解决方案，模糊以去除那些无用的细节。