HTML5   发布时间:2022-04-26  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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

看到jsFilddle的差异.

大佬总结

以上是大佬教程为你收集整理的html5 – 在应用CSS3时关闭svg上的反锯齿:放大元素?全部内容,希望文章能够帮你解决html5 – 在应用CSS3时关闭svg上的反锯齿:放大元素?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。