应用CSS3时关闭svg上的抗锯齿:放大元素？

Question

我发现当CSS3 Zoom适用于小型SVG图标(9px:9px,缩放:1.5)时,SVG图标可能会模糊不清.在这种情况下,有什么想要得到一个清晰而干净的图标？提前致谢.

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9">
    <g>
        <g fill="none" transform="translate(0.5, 0.5)"> 
            <g stroke="#000000" stroke-width="0.5" stroke-linecap="square" >
                <line x1="2" y1="4"  x2="6" y2="4"/>
                <line x1="4"  y1="2" x2="4" y2="6"/>
            </g>
            <g stroke="#909090" stroke-width="1" stroke-linecap="square" >
                <rect x="0" y="0" width="8" height="8"/>
            </g>
        </g>
    </g>
</svg>

Answer 1

自己找到了解决方案.诀窍是添加:

shape-rendering="crispEdges"

到SVG元素.

来自Mozilla MDN:

crispEdges 指示用户代理将尝试强调图稿的干净边缘与渲染速度和几何精度之间的对比度.为了实现清晰的边缘,用户代理可能会关闭所有线条和曲线的抗锯齿,或者可能只关闭接近垂直或水平的直线.此外,用户代理可以调整线位置和线宽以使边缘与设备像素对齐.

查看jsFilddle的区别.