首页 > 其他 > 详细

SVG---------SVG sprite 使用示例

时间:2014-10-14 18:43:10      阅读:220      评论:0      收藏:0      [点我收藏+]

SGV_sprite 使用方法

          生成svg_sprite网站: https://icomoon.io/app

          使用示例:

                    

          

icon-untitled
icon-home
icon-untitled2
icon-untitled3
icon-untitled4
icon-untitled5
icon-untitled6
icon-untitled7
icon-untitled8
icon-untitled9
icon-untitled10
icon-untitled11
icon-untitled12
icon-untitled13
icon-untitled14
icon-untitled15
icon-untitled16
icon-untitled17
icon-untitled18
icon-untitled19
icon-untitled20
icon-untitled21
icon-untitled22
icon-untitled23

使用案例参照本页面源代码

  1. 先导入<svg>整合code,然后在需要的地方直接<use xlink:href="#iconXXXX">引用相对的图标  .
  2. 注意设置viewBox,该属性可以控制图标显示方式,通常设置为 viewBox="0 0 icon.width icon.height",显示为图标大小并且位置居中对齐
  3. 通过给svg元素在css 内设置 fill和fill-opacity控制显示颜色和透明度
  4. 通过给svg元素在css内设置 stroke和其相关属性可以控制icon的描边显示(这个功能在icon-font是通过text-stroke实现,表现效果略差)

SVG---------SVG sprite 使用示例

原文:http://www.cnblogs.com/yansi/p/4024931.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!