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

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实现,表现效果略差)
时间： 2024-10-13 20:36:40

SVG---------SVG sprite 使用示例的相关文章

HTML5 SVG之矩形简单示例分享

最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享“svg之矩形”部分 1.简单矩形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100"></rect> </svg> 代码解析: rect

SVG Sprite技术介绍

未来必热:SVG Sprite技术介绍 这篇文章发布于 2014年07月10日,星期四,18:03,归类于 SVG相关. 阅读 100049 次, 今日 15 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4264 一.Sprite技术 这里所说的Sprite技术,没错,类似于CSS中的Sprite技术.图标图形整合在一起,实际呈现的时候准确显示特定图标. 另,本

HTML学习总结（四）【canvas绘图、WebGL、SVG】

一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图.SVG 绘图很容易编辑与生成,但功能明显要弱一些. canvas可以完成动画.游戏.图表.图像处理等原来需要Flash完成的一

SVG开发包, 20 个有用的 SVG 工具，提供更好的图像处理

20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web 设计时,我们还需要做一些优化来使得 SVG 变得更加轻量. 下面介绍的 20 个工具,可以帮助你快速有效的创建 SVG 图像.现有的在线工具已经可以帮助我们进行优化.转换.新建模式等工作. 更详细的介绍,参见:How To Create SVG Animation Using CSS 交互式 SVG

HTML5 学习总结（四）——canvas绘图、WebGL、SVG

HTML5 学习总结(四)--canvas绘图.WebGL.SVG 目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML5游戏开发 2.2.1.Cocos2D-HTML5 2.2.2.Egret(白鹭引擎) 三.SVG 3.1.SVG Hello Wrold 3.2.多种引入SVG的方法 3.3.画直线 3.4.画椭圆 3.5.文本与矩形 3.6.向

[转]用CSS给SVG &lt;use&gt;的内容添加样式

来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=referral --------------------------------------------------------------------------------------------------------------------- 一篇深入探究如何给SVG<use>元素的内容添加样

HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图.SVG 绘图很容易编辑与生成,但功能明显要弱一些. canvas可以完成动画.游戏.图表.图像处理等原来需要Flash完成的一

SVG可缩放矢量图形

SVG是指可伸缩矢量图形 SVG用来定义用于网络的基于矢量的图形 SVG使用XML格式定义图形 SVG图像在放大或缩小(改变尺寸)的情况下,其图形质量不会受受损失 SVG是W3C的一个标准 与其他图像格式相比,使用SVG的优势在于: SVG可被非常多的工具读取和修改(比如记事本) SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强. SVG是可伸缩的 SVG图像可在任何的分辨率下被高质量地打印 SVG可在图像质量不下降的情况下被放大 SVG图像中的文本是可选的,同时也是可搜索的(很适合

SVG 基本绘图方法总结

基本内容:   * SVG并不属于HTML5专有内容    * HTML5提供有关SVG原生的内容   * 在HTML5出现之前,就有SVG内容   * SVG,简单来说就是矢量图   * SVG文件的扩展名为".svg"   * SVG使用的是XML语法 一.概念:   * SVG是一种使用XML技术描述二维图形的语言   * SVG特点    * SVG绘制图形可以被搜索引擎抓取    * SVG在图片质量不下降的情况下,被放大   * SVG与Canvas的区别    * SVG