svg的深入学习（一）

今天来总结一下 SVG

刚开始接触 SVG的时候，感觉有些难，现在上手 SVG，很简单，会运用就好

1. SVG的概念和理解

（1） SVG的概念：

              SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
              SVG 用来定义用于网络的基于矢量的图形
              SVG 使用 XML 格式定义图形
              SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
              SVG 是万维网联盟的标准
              SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体

（2） SVG的基础知识学习可以参考菜鸟教程：http://www.runoob.com/svg/svg-tutorial.html

注意以下：路径（path）

指令                              参数                             名称                                                                           描述
   M                                 x,y                              moveto                          移动到 移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制
   m                                x,y                              moveto                                                       同M，但使用相对坐标
    L                                x,y                                lineto                            连直线到 从当前画笔所在位置绘制一条直线到指定的（x,y）坐标
    l                                 x,y                                 lineto                                                         同L，但使用相对坐标
   H                                 x                            horizontal lineto               水平连线到 绘制一条水平直线到参数指定的x坐标点，y坐标为画笔的y

                                                                                                                                                                 坐标
   h                                  x                           horizontal lineto                                             同H，但使用相对坐标
   V                                  y                              vertical lineto                   垂直连线到 从当前位置绘制一条垂直直线到参数指定的y坐标
   v                                   y                              vertical lineto                                                同V，但使用相对坐标
   C                        x1,y1 x2,y2 x,y                     curveto                     三次方贝塞尔曲线 从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）

                                                                                                                                                             指定的坐标。

                                                                                                                    x1，y1和x2,y2是曲线的开始和结束控制点，用于控制曲线的弧度
   c                         x1,y1 x2,y2 x,y                      curveto                                                   同C，但使用相对坐标
   S                            x2,y2 x,y                         shorthand                 平滑三次方贝塞尔曲线 从当前画笔位置绘制一条三次贝塞尔曲线到

                                                                                                                                                          参数（x,y）指定的坐标。

                                                                                                                      x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同
   s                             x2,y2 x,y                          shorthand                                        平滑三次方贝塞尔曲线 同S，但使用相对坐标
   Q                             x1,y1 x,y                                                                二次方贝塞尔曲线 从当前画笔位置绘制一条二次方贝塞尔曲线到

                                                                                                                                                            参数（x,y）指定的坐标。

                                                                                                                                              x1,y1是控制点，用于控制曲线的弧度
   q                              x1,y1 x,y                                                                                              二次方贝塞尔曲线 同Q，但使用相对坐标
   T                                   x,y                                                                 平滑的二次贝塞尔曲线 从当前画笔位置绘制一条二次贝塞尔曲线到参数

                                                                                                                                                                 （x,y）指定的坐标。

                                                                                                                                                     控制点被假定为最后一次使用的控制点
   t                                    x,y                                                                                                平滑的二次贝塞尔曲线 同T，但使用相对坐标
   A        rx,ry x-axis-rotation large-arc-flag,sweepflag x,y                椭圆弧线 从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐

                                                                                                                 标。rx和ry分别为椭圆弧线水平和垂直方向上的半径。x-axis-rotation

                                                                                                                 指定弧线绕x轴旋转的度数。它只在和ry的值不相同是有效果。large-

                                                                                                                      arc-flag是大弧标志位，取值0或1，用于决定绘制大弧还是小弧。

                                                                                                                                                         sweep-flag用于决定弧线绘制的方向
   a       rx,ry x-axis-rotation large-arc-flag,sweepflag x,y                                                                椭圆弧线 同A，但使用相对坐标
   Z                                                                                                                                 无 闭合路径 从结束点绘制一条直线到开始点，闭合路径
   z                                                                                                                                                                             无 闭合路径 同Z

（3） 学习SVG，避免不了和Canvas的比较，不同点如下 ：

         SVG
　　　　SVG 是一种使用 XML 描述 2D 图形的语言。
　　　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
　　　　在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
　　　　特点：
　　　　 　　不依赖分辨率
　　　　 　　支持事件处理器
　　　　 　　最适合带有大型渲染区域的应用程序（比如谷歌地图）
　　　　　　 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
　　　　 　　不适合游戏应用
　　 Canvas
　　　　Canvas 通过 JavaScript 来绘制 2D 图形。
　　　　Canvas 是逐像素进行渲染的。
　　　　在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
　　　　特点：
　　　 　　    依赖分辨率
　　　　 　　不支持事件处理器
　　　　　　 弱的文本渲染能力
　　　　　　 能够以 .png 或 .jpg 格式保存结果图像
　　　　 　　最适合图像密集型的游戏，其中的许多对象会被频繁重绘

下次会继续介绍SVG,并且结合JavaScript添加一些特效

• 
  
•