我发现当 CSS3 缩放应用于小 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>
最佳答案
我自己找到了解决方案。诀窍是添加:
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 上的差异.
关于css - 应用 CSS3 :Zoom on the element? 时关闭 svg 上的抗锯齿，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16889078/