H5中SVG的使用

一、SVG-可缩放矢量图形

1、什么是SVG

        SVG是一种使用XML技术描述二维图形的语言，SVG是一种矢量图。

        并不属于H5专有内容，在H5出现之前，就有SVG内容，不过H5提供了SVG原生内容。

        SVG扩展名为.SVG。

2、SVG的优势

        可通过文本编辑器来创建和修改

        图像中的文本是可选的，同时也是可搜索的（适合制作地图）

        SVG在任何分辨率下被高质量的打印

        可在图像质量不下降的情况下被放大

        SVG与JPEG和GIF比起来，尺寸更小，且可压缩性更强

        支持事件绑定

        SVG可与JAVA技术一起运行

        SVG是开放的标准

        SVG文件是纯粹的XML

3、SVG与CANVAS的区别

        SVG-实际开发中多用SVG

            不依赖分辨率

            支持事件处理器

            不适合游戏

            大型渲染区域的程序（如百度地图）

        CANVAS

            依赖分辨率

            不支持事件绑定

            最适合网页游戏

            可以用图片格式保存图像

        不论SVG还是CANVAS，在一个页面中都可以定义多个

4、用途

        静态绘制图形

        动态动画效果

        专门提供事件

二、SVG-绘制图形

1、创建SVG元素<svg></svg>

        类似与canavs元素，可在元素内写width="" height=“”

        但可以使用css样式

        使用SVG绘制图形，必须定义在SVG元素中

2、画矩形-创建矩形元素

        <rect    x="100"    y="100"    width="200"    height="150"    fill="blue"    stroke="red"    stroke-width="5"></rect>

        如果用style属性来设置它的样式，例如设置颜色style='background:red'是不行的，要使用style="fill:red"

3、画圆形-创建圆形元素

        <circle    cx="50"    cy="50"    r="50"></circle>

4、画椭圆形-创建椭圆元素

        <ellipse    cx=""    cy=""    ry="">

        cx属性定义原点的x坐标

        cy属性定义原点的y坐标

        rx属性定义水平半径

        ry属性定义垂直半径

        rx=ry画出来就是一个圆

5、画直线-创建直线元素

        颜色必须得加

        <line    x1=""    y1=""    x2=""    y2=""    stroke-width=""    stroke="">

        填上对应数值

6、画折线-创建折线元素

        points - 设置起点 折点及终点，x和y用逗号分隔，多个折点用空格隔开

        会默认将折线中的区域（起点到终点），默认提供黑色，将fill设置为canvas颜色，将stroke设置为另外一种颜色

        <polyline    points=""    stroke=""    fill=""></polyline>

7、画多边形-多边形元素

        不用考虑折点的显示问题

        <polygon    points="">