H5中的SVG

一、什么是SVG？

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。并不属于HTML5专有内容，在HTML5出现之前，就有SVG内容，HTML5只不过提供了SVG原生的内容

二、SVG与canvas的区别：

SVG :

实际开发中，多用SVG
可以被搜索引擎搜索到
不依赖分辨率
支持事件处理器
不适合游戏
大型渲染区域的程序(例如，百度地图)

Canvas

依赖分辨率
不支持事件绑定
最适合网页游戏
可以用图片格式保存图像
不是是SVG还是Canvas，在一个页面中都可以同时定义多个

三、SVG 绘制图形

使用<svg></svg>标签，类似于canvas元素，但可以使用css样式；使用svg绘制图形，必须定义在svg元素中。

• 绘制矩形

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

• 圆形

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

• 椭圆

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

• 直线

<line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black">
必须加颜色，否则不显示

• 折线

points - 设置起点 折点及重点，x和y用逗号分隔，多个折点用空格隔开
 会默认将折线中的区域(起点到终点)，默认提供黑色,将fill设置为canvas的颜
色，将stroke设置为另一种颜色
 <polyline points=" 10,10 20,20 30,30">

• 多边形

 不用考虑折点的显示问题
  <polygon points="10,10 20,20 30,30 10,10">

综合实例：

<svg id="huatu" style="width:400px;height:400px;background:red">
    <rect x="10" y="10" width="200" height="150" fill="blue" stroke="white" stroke-width="4"> </rect>
    <circle cx="100" cy="230" r="50" fill="yellow" stroke="orange" stroke-width="4"></circle>
    <ellipse cx="100" cy="340" rx="80" ry="50" fill="green"></ellipse>
    <line x1="230" y1="20" x2="230" y2="380" stroke-width="10" stroke="black"></line>
    <!--<polyline points="230,150 300,150 400,40 230,150" fill="red" stroke="white" stroke-width="20px">-->
    <polygon points=250,50 350,50 300,200 250,50" fill="red" stroke="white></polygon>
</svg>

SVG绘图

四、渐变

<svg style="width:400px;height:400px">
    <!--svg渐变效果几个问题
    1.设置linearGradient的坐标值都得是百分比
    2.设置通过stop设置颜色，offset的值必须是百分比，而且stop必须要有结束符<stop/>或<stop></stop>
    3.将绘制的图形与渐变效果结合时 fill="url(#linearGradient的id值)"-->
            <defs >
                <!--lineargradient渐变元素-->
                <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="100%">
                    <!--stop添加渐变颜色-->
                    <stop offset="0%" stop-color="red"/>
                    <stop offset="100%" stop-color="green"/>
                </linearGradient>
            </defs>
            <rect  x="0" y="0" width="400" height="400" fill="url(#linear)" stroke="black" stroke-width="5" ></rect>
        </svg>

渐变

高斯模糊

<svg width="500" height="500" " > 
    <defs> 
      <filter id="Gaussian_Blur"> //滤镜
            <!--//fegaussianblur- 高斯模糊,stdDeviation - 设置模糊程度 -->
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> 
                <!--in="SourceGraphic"是固定写法-->
       </filter>
  </defs>
<rect x="0" y="0" width="400" height="400" fill="red" filter="url(#Gaussian_Blur">
 </svg>

高斯模糊