chrome中的SVG像素化

Question

这很奇怪.我正在使用SVG图像,因为它具有较低的文件大小,清晰的渲染和可伸缩性(对象的动画效果相当大).它在FF,ie9,Safari和iPad中运行完美,但在Chrome中某些SVG图像渲染效果非常差.

SVG in chrome

野生动物园的SVG

任何想法为什么会这样？svg文件本身非常小.

这是一些样本svg

Answer 1

所以无论如何,这是一个合法的chrome bug.并且有一个修复,使svg'更大',内部报告太小的svg文件导致这个bug.

有些人无法处理真相!HAHAH (6认同)
5年后,我遇到了这个问题,但是在一个复杂的系列环境中,我使用Chrome打印300dpi的正式打印流程,这涉及到我(愚蠢,是的!).很确定我大量使用`zoom`属性会导致Chrome以一种Chrome没有考虑的方式爆发.对不起,我想说的是,无论SVG的大小如何,这个问题一直存在,直到我在这里尝试了较低的投票答案:http://stackoverflow.com/questions/9562330/svg-pixelation-in-chrome#answer -31072891 (3认同)

Answer 2

经过大量研究，我终于找到了一个可行的解决方案：
将svg导出所需尺寸的两倍（因此我将其命名为filename@2x.svg），
然后在CSS中添加transform: scale(0.5)

Chrome中的结果与Firefox中的结果相同。