12.17学习经验分享#
Bruce_Zhu于2016.12.17
SVG##
——SVG特点：
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体
SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
小试牛刀-SVG简单绘制：#####
<pre>
<svg style="width: 400px;height: 400px;background: pink;">
<!--都是通过fill来设置背景色-->
<!--矩形-->
<rect id="rect" x="100" y="100" width="50" height="50" fill="orange" stroke="red" stroke-width="5" style="fill:yellow;"></rect>
<!--圆-->
<circle cx="50" cy="50" r="50" fill="orange" stroke="yellow" stroke-width="5"></circle>
<!--椭圆-->
<ellipse cx="100" cy="210" rx="80" ry="50" fill="yellow"></ellipse>
<!--必须使用stroke设置线的颜色才能显示出来,只能设置直线，不能做折线-->
<!--直线-->
<line x1="0" y1="0" x2="400" y2="400" stroke="white"></line>
<!--折线-->
<!--会自动将折线包含的内容填充为黑色，但没闭合,使用fill将填充色设置为背景色-->
<!--用折线绘制矩形在闭合时有bug-->
<polyline points="100,20 20,100 200,200 100,20" stroke="red" stroke-width="10" fill="pink"></polyline>
<!--绘制多边形-->
<polygon points="100,350 20,100 200,200 100,350" stroke="red" stroke-width="10" fill="pink"></polyline>
</svg>
</pre>
小试牛刀-SVG渐变：#####
<pre>
<svg style="width:400px;height:400px;">
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="red"></stop>
<stop offset="100%" stop-color="orange"></stop>
</linearGradient>
</defs>
<rect x="0" y="0" width="400px" height="400px" fill="url(#linear)" stroke="yellow" stroke-width="5"></rect>
</svg>
<svg width="500" height="500" fill="orange">
<defs>
<filter id="Gaussian_Blur">
<!--fegaussianblur- 高斯模糊,stdDeviation - 设置模糊程度 -->
<feGaussianBlur in="SourceGraphic" stdDeviation="3">
</filter>
</defs>
<rect x="0" y="0" width="400" height="400" filter="url(#Gaussian_Blur)">
</svg>
</pre>
