SVG 基本绘图方法总结

基本内容：
  　　* SVG并不属于HTML5专有内容
   　　* HTML5提供有关SVG原生的内容
  　　* 在HTML5出现之前,就有SVG内容
  　　* SVG,简单来说就是矢量图
  　　* SVG文件的扩展名为".svg"
  　　* SVG使用的是XML语法

一、概念：
  　　* SVG是一种使用XML技术描述二维图形的语言
　　 * SVG特点
  　　　　 * SVG绘制图形可以被搜索引擎抓取
   　　　　* SVG在图片质量不下降的情况下，被放大
  　　* SVG与Canvas的区别
   　　　　* SVG
    　　　　　　* 不依赖分辨率
    　　　　　　* 支持事件绑定
    　　　　　　* 大型渲染区域的程序(例如百度地图)
    　　　　　　* 不能用来实现网页游戏
   　　　　* Canvas
    　　　　　　* 依赖分辨率
    　　　　　　* 不支持事件绑定
    　　　　　　* 最合适网页游戏
    　　　　　　* 保存为".jpg"格式的图片
  　　* SVG用途
   　　　　* 网页中一些小的图标
   　　　　* 网页中动态特效(动画效果)
　　SVG 文件示例

1 <?xml version="1.0" encoding="utf-8" ?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <svg width="100%" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
4     <rect x="100" y="100" width="300" height="100" fill="blue" troke="black" 
5     stroke-width="4"/>
6 </svg>

二、HTML5中使用SVG
  　　* 使用<svg></svg>元素
   　　　　* 作用 - 类似于<canvas>元素
    　　　　　　* 默认大小为 300px*150px
    　　　　　　* 使用CSS样式
  　　* 使用SVG绘制图形，必须定义<svg>中
　　示例：

1 <svg width="100%" height="300">
2     <rect x="100" y="100" width="300" height="100" fill="blue" troke="black" stroke-width="4"/>
3 </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="" />

　　示例：

 1 <!--
 2     在HTML页面中使用svg标签的话
 3     * 定义<svg></svg>元素
 4       * 类似于<canvas>元素的作用
 5       * 默认大小 300px * 150px
 6       * 设置宽度和高度 - 属性和style
 7     * 利用svg绘制所有图形,必须定义在<svg>元素内
 8       * 利用svg绘制的图形是与HTML页面有关的
 9   -->
10   <!-- <svg style="background:pink;width:400px;height:400px;"> -->
11     <!--
12         绘制矩形 - <rect />
13         * x和y - 绘制矩形的左上角坐标值
14         * width和height - 绘制矩形的宽度和高度
15           * 必须使用属性方式,不能使用style样式方式
16         * 默认颜色为黑色
17         设置颜色 - 既可以使用属性,还可以使用样式
18         * fill - 设置填充颜色
19         * stroke - 设置描边颜色
20         设置线条宽度
21         * stroke-width
22         注意
23         * svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是SVG属性
24     -->
25     <rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5" />
26 
27     <!--
28         绘制圆形 - <circle>
29         * cx和cy - 圆形的圆形坐标值
30         * r - 圆形的半径
31     -->
32     <circle cx="100" cy="100" r="100" fill="pink" />
33     
34     <!-- SVG绘制椭圆 -->
35     <ellipse cx="150" cy="150" rx="150" ry="100" />
36     
37     <!-- SVG绘制线条 -->
38     <line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"/>
39     <line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"/>
40     
41     <!-- SVG绘制折线 -->
42     <polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/>
43     
44     <!-- SVG绘制多边形 -->
45     <polygon points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white" />

View Code

四、特效元素
  　　1. 渐变 - 渐变元素定义在<defs>元素内
   　　　　* 线性渐变 - <linearGradient>
    　　　　　　* 该元素是起始元素
    　　　　　　<linearGradient x1="%" y1="%" x2="%" y2="%">
     　　　　　　　　<stop offset="%" stop-color="color" />
    　　　　　　</linearGradient>
   　　　　* 扇形(射线)渐变 - <radialGradient>
  　　2. 滤镜 - 高斯模糊
   　　　　* 滤镜使用<filter>元素
   　　　　* <feGaussianBlur>元素 - 高斯模糊
    　　　　　　* in="SourceGraphic"
    　　　　　　* stdDeviation - 设置模糊程度
   　　　　* 注意 - 定义在<defs>元素中

 1     <!-- SVG线性渐变 -->
 2     <svg width="400px" height="400px">
 3     <!--
 4         设置线型渐变 - <linearGradient>
 5         * 用法 - 将渐变定义在<defs>元素中
 6         * 特点 - 具有基准线
 7           * 起点坐标值 - x1和y1
 8           * 终点坐标值 - x2和y2
 9         * 注意
10           * 该元素是起始元素
11             <linearGradient></linearGradient>
12           * x1和y1、x2和y2的值都是百分值
13         * 定义id属性
14           * 用于将设置的渐变添加到绘制的图形元素中
15         * 使用<stop>元素 - 设置渐变的颜色
16           * offset - 设置渐变颜色的位置
17             * 该值也是百分值
18           * stop-color - 设置渐变颜色
19           * stop-opacity - 设置渐变颜色的透明度
20     -->
21     <defs>
22         <linearGradient id="mygrd" x1="0" y1="0" x2="100%" y2="100%">
23             <stop offset="0" stop-color="red" />
24             <stop offset="50%" stop-color="green" />
25             <stop offset="100%" stop-color="blue" />
26         </linearGradient>
27     </defs>
28     <!--
29         如何可以将上面设置线型渐变,添加在下面的矩形中?
30         * 使用fill属性,值为url(#渐变元素的id值)
31     -->
32     <rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" />
33   </svg>
34   <!-- SVG高斯模糊 -->
35     <svg width="500px" height="500px">
36     <!--
37         如何设置高斯模糊滤镜
38         * 定义<defs></defs>元素 - 滤镜定义在该元素中
39         * 定义<filter></filter>元素 - 表示SVG的滤镜
40           * 定义高斯模糊元素<feGaussianBlur>
41           * 属性
42             * in="SourceGraphic" - 固定写法
43             * stdDeviation - 设置模糊程度
44         * 为<filter>元素定义id属性值
45           * 方便添加在绘制图形的元素中
46     -->
47     <defs>
48         <filter id="myfilter">
49             <feGaussianBlur in="SourceGraphic" stdDeviation=5 />
50         </filter>
51     </defs>
52     <!--
53         如何将上面的高斯模糊与下面的元素进行关联
54         * 使用filter属性,值为url(#id)
55           * 设置当前图形的滤镜
56     -->
57     <rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" />
58   </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库

posted @ 2015-11-12 22:37 Medeor 阅读(2143) 评论(1) 编辑收藏举报

刷新页面返回顶部

Medeor

WEB,JavaScript,C#学习笔记

SVG 基本绘图方法总结

公告