h5 新增特性 - SVG绘图

SVG绘图

 Scalable Vector Graphic，可缩放向量图

           在H5标准之前的使用方法：SVG标签不能直接书写在网页中，只能编写在独立的XML文档中；

           网页中使用进行嵌入

           纳入H5标准后的使用方法：SVG标签可以直接书写在网页中。

Canvas与SVG的不同：

(1)Canvas是位图；SVG是矢量图

(2)Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)

(3)Canvas内容不能使用CSS；SVG内容可以使用CSS；

(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定

           常用的SVG图形：

           (1)矩形

              

           (2)圆形

         

           (3)椭圆

                

           (4)直线（没有fill只有stroke）

                 

           (5)折线（fill必须设置透明/stroke必须手工指定）

       

           (6)多边形

        

           (7)文本

               达内科技2018ajgy

           (8)图像

               

           扩展小知识：

           (1)使用滤镜（高斯模糊）

             参考MDN手册：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter

                  声明滤镜：

              

                 

               

                  使用滤镜：

                  

          (2)使用颜色渐变对象

                  声明渐变对象：

                  

                  

                  

                  

                  

                  使用渐变对象：