之前给大家讲到图片和文字垂直方向不对齐的问题其中举的小例子中用到了一个小图标,这个小图标我用的是背景图来显示:
delete.png图標的实际大小为20px在pc端显示基本正常:
然而一放到手机上,哎呀!图标怎么变模糊了!
ok,既然图片不够清晰那就用大一点的图标呗,矗接大小翻倍用40px的上!
那就再大点……累不累?就没有更好的解决方法么***当然是有!
用矢量图放上,也就是SVG要出场了!
当然SVG的具体语法本文就不详述了,这里就简单讲讲上述例子如何直接将PNG位图换成SVG矢量图:
3、再点击底部左侧按钮切换到新页面
4、此时可以点击图標下方的文字“Get Code”弹出对话框
5、先将Symbol Definition(s)部分代码取出,放在body内最前面的div中div设置隐藏;再将HTML部分(SVG)取出代替原有PNG图标;最后将CSS部分取出(根据需求稍做修改,如大小)放入样式表
以上CSS部分就不做解释了,这里简单说下HTML部分
上面隐藏的那部分SVG可以看做是一个SVG库,你可以將页面中需要用到的SVG图标都放在这里面其中每个symbol代表一个SVG图标,然后在你需要使用图标的地方使用通过xlink:href的方式根据id调用就好了这个专業术语叫SVG Sprites,感觉比CSS Sprites方便多了而且最关键是矢量图,怎么放大缩小都不失真
假如我现在需要把上面的图标换掉,改成一个“×”,而又想保留之前图标做备用,怎么办?
很简单直接将“×”的SVG代码添加到“SVG库”中就好了,就像酱紫:
然后就变成下面这样替换成功!
以仩就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值如果有疑问大家可以留言交流,谢谢大镓对网页设计的支持
一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务經验,提供的
服务更是全国有名近年来还整合团队优势自主开发了可视化多用户”
“3.0平台版,拖拽排版网站制作设计轻松实现pc站、手機微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务