html5 – 在应用CSS3时关闭svg上的反锯齿：放大元素？

我发现当 css3缩放应用于小svg图标(9px：9px with zoom：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>

解决方法

自己有一个解决方案诀窍是添加：

shape-rendering="crispEdges"

到SVG元素.

从Mozilla MDN：

crispEdges
Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges,the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also,the user agent might adjust line positions and line widths to align edges with device pixels.

看到jsFilddle的差异.