SVG 基本绘图方法总结
2015-11-12 22:37
302 查看
基本内容:
* SVG并不属于HTML5专有内容
* HTML5提供有关SVG原生的内容
* 在HTML5出现之前,就有SVG内容
* SVG,简单来说就是矢量图
* SVG文件的扩展名为".svg"
* SVG使用的是XML语法
一、概念:
* SVG是一种使用XML技术描述二维图形的语言
* SVG特点
* SVG绘制图形可以被搜索引擎抓取
* SVG在图片质量不下降的情况下,被放大
* SVG与Canvas的区别
* SVG
* 不依赖分辨率
* 支持事件绑定
* 大型渲染区域的程序(例如百度地图)
* 不能用来实现网页游戏
* Canvas
* 依赖分辨率
* 不支持事件绑定
* 最合适网页游戏
* 保存为".jpg"格式的图片
* SVG用途
* 网页中一些小的图标
* 网页中动态特效(动画效果)
SVG 文件示例
二、HTML5中使用SVG
* 使用<svg></svg>元素
* 作用 - 类似于<canvas>元素
* 默认大小为 300px*150px
* 使用CSS样式
* 使用SVG绘制图形,必须定义<svg>中
示例:
三、绘制图形
1. 矩形元素
<rect x="" y="" width="" height="" />
2. 圆型元素
<circle cx="" cy="" r="" />
3. 椭圆元素
<ellipse cx="" cy="" rx="" ry="">
4. 直线元素
<line x1="" y1="" x2="" y2="" />
5. 折线元素
<polyline points="">
6. 多边形元素
<polygon points="" />
示例:
View Code
老师的题外话:
* 实际开发中
* 多用SVG
* 不失真
* 可被搜索
* 页面优化 - 减少外部链接
* <a href="">
* <img src="">
* Canvas - HTML绘制图形
* 实际运行中,是以图片方式出现(.png)
* 不能被搜索引擎抓取
* 放大后失真
* SVG内容
* 内容量非常大
* 静态绘制图形
* 动态动画效果
* 专门提供事件
* 网上关于SVG的资料很少(没有书籍)
* SVG的规范(W3C英文)
* SVG或CANVAS在HTML页面中定义
* 是只能定义一个元素,还是可以定义多个元素?
* 在一个HTML页面可以定义多个<svg>或<canvas>元素
* SVG还是CANVAS都是允许同时定义(绘制)多个图形
* 在实际开发中的使用
* SVG在将来的工作开发,使用率并不高
* SVG图片一般都是由UI设计师来完成
* SVG即使是我们自己来设计(绘制)
* 目前网络上很多专门提供现成的SVG图片的网站
* 使用JS库
* SVG并不属于HTML5专有内容
* HTML5提供有关SVG原生的内容
* 在HTML5出现之前,就有SVG内容
* SVG,简单来说就是矢量图
* SVG文件的扩展名为".svg"
* SVG使用的是XML语法
一、概念:
* SVG是一种使用XML技术描述二维图形的语言
* SVG特点
* SVG绘制图形可以被搜索引擎抓取
* SVG在图片质量不下降的情况下,被放大
* SVG与Canvas的区别
* SVG
* 不依赖分辨率
* 支持事件绑定
* 大型渲染区域的程序(例如百度地图)
* 不能用来实现网页游戏
* Canvas
* 依赖分辨率
* 不支持事件绑定
* 最合适网页游戏
* 保存为".jpg"格式的图片
* SVG用途
* 网页中一些小的图标
* 网页中动态特效(动画效果)
SVG 文件示例
<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="100" y="100" width="300" height="100" fill="blue" troke="black" stroke-width="4"/> </svg>
二、HTML5中使用SVG
* 使用<svg></svg>元素
* 作用 - 类似于<canvas>元素
* 默认大小为 300px*150px
* 使用CSS样式
* 使用SVG绘制图形,必须定义<svg>中
示例:
<svg width="100%" height="300"> <rect x="100" y="100" width="300" height="100" fill="blue" troke="black" stroke-width="4"/> </svg>
三、绘制图形
1. 矩形元素
<rect x="" y="" width="" height="" />
2. 圆型元素
<circle cx="" cy="" r="" />
3. 椭圆元素
<ellipse cx="" cy="" rx="" ry="">
4. 直线元素
<line x1="" y1="" x2="" y2="" />
5. 折线元素
<polyline points="">
6. 多边形元素
<polygon points="" />
示例:
<!-- SVG线性渐变 --> <svg width="400px" height="400px"> <!-- 设置线型渐变 - <linearGradient> * 用法 - 将渐变定义在<defs>元素中 * 特点 - 具有基准线 * 起点坐标值 - x1和y1 * 终点坐标值 - x2和y2 * 注意 * 该元素是起始元素 <linearGradient></linearGradient> * x1和y1、x2和y2的值都是百分值 * 定义id属性 * 用于将设置的渐变添加到绘制的图形元素中 * 使用<stop>元素 - 设置渐变的颜色 * offset - 设置渐变颜色的位置 * 该值也是百分值 * stop-color - 设置渐变颜色 * stop-opacity - 设置渐变颜色的透明度 --> <defs> <linearGradient id="mygrd" x1="0" y1="0" x2="100%" y2="100%"> <stop offset="0" stop-color="red" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="blue" /> </linearGradient> </defs> <!-- 如何可以将上面设置线型渐变,添加在下面的矩形中? * 使用fill属性,值为url(#渐变元素的id值) --> <rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" /> </svg> <!-- SVG高斯模糊 --> <svg width="500px" height="500px"> <!-- 如何设置高斯模糊滤镜 * 定义<defs></defs>元素 - 滤镜定义在该元素中 * 定义<filter></filter>元素 - 表示SVG的滤镜 * 定义高斯模糊元素<feGaussianBlur> * 属性 * in="SourceGraphic" - 固定写法 * stdDeviation - 设置模糊程度 * 为<filter>元素定义id属性值 * 方便添加在绘制图形的元素中 --> <defs> <filter id="myfilter"> <feGaussianBlur in="SourceGraphic" stdDeviation=5 /> </filter> </defs> <!-- 如何将上面的高斯模糊与下面的元素进行关联 * 使用filter属性,值为url(#id) * 设置当前图形的滤镜 --> <rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" /> </svg>
View Code
老师的题外话:
* 实际开发中
* 多用SVG
* 不失真
* 可被搜索
* 页面优化 - 减少外部链接
* <a href="">
* <img src="">
* Canvas - HTML绘制图形
* 实际运行中,是以图片方式出现(.png)
* 不能被搜索引擎抓取
* 放大后失真
* SVG内容
* 内容量非常大
* 静态绘制图形
* 动态动画效果
* 专门提供事件
* 网上关于SVG的资料很少(没有书籍)
* SVG的规范(W3C英文)
* SVG或CANVAS在HTML页面中定义
* 是只能定义一个元素,还是可以定义多个元素?
* 在一个HTML页面可以定义多个<svg>或<canvas>元素
* SVG还是CANVAS都是允许同时定义(绘制)多个图形
* 在实际开发中的使用
* SVG在将来的工作开发,使用率并不高
* SVG图片一般都是由UI设计师来完成
* SVG即使是我们自己来设计(绘制)
* 目前网络上很多专门提供现成的SVG图片的网站
* 使用JS库
相关文章推荐
- [kuangbin带你飞]专题一 简单搜索 L - Oil Deposits HDU1241
- 【线性代数公开课MIT Linear Algebra】 第二十课 行列式的应用
- CSS盒子模型(简要了解)
- 解释器模式
- 第123讲:Hadoop集群管理之Namenode目录元数据结构详解学习笔记
- AndroidUI--官方侧滑菜单DrawerLayout使用
- Python模块
- 模板编译与实例化浅析
- rabbitMQ学习笔记(4):pub/sub
- stdarg.h详解
- stdarg.h详解
- 模板编译与实例化浅析
- 享元模式
- Eclipse插件打包
- 文件压缩命令
- C++之友元类
- 【android】uses-permission和permission详解
- jdk动态代理
- iOS程序逆向Mac下常用工具——Reveal、HopperDisassemble、IDA
- 中介者模式