SVG入门笔记
1.XML入门知识简介笔记：连接
2.SVG 指可伸缩矢量图形 (Scalable Vector Graphics);SVG 使用 XML 格式定义图形;SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失;SVG是由XML编写
3.与其他图像格式相比，使用 SVG 的优势在于：
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
3.SVG文件例子：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>standalone属性规定的是此SVG问价是否独立，对外部是否有引用；stroke 和 stroke-width 属性控制如何显示形状的轮廓
4.把SVG问价嵌入HTML文件的不同方法：
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<iframe src="rect.svg" width="300" height="100">
</iframe>
畅想（可以尝试引用与w3c）
<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>
- <embed> 标签被所有主流的浏览器支持，并允许使用脚本；注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。
-
<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本；注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object> 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！
-
<iframe> 标签可工作在大部分的浏览器中
5.SVG 有一些预定义的形状元素，可被开发者使用和操作：
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
6.<path> 标签用来定义路径;下面的命令可用于路径数据：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
解析详情查看：
M = moveto(X,Y) ：将画笔移动到指定的坐标位置
L = lineto(X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(X)：画水平线到指定的X坐标位置
V = vertical lineto(Y)：画垂直线到指定的Y坐标位置
C = curveto(X1,Y1,X2,Y2,ENDX,ENDY)：三次次贝赛曲线
S = smooth curveto(X2,Y2,ENDX,ENDY)：光滑三次次贝塞尔曲线
Q = quadratic Belzier curve(X,Y,ENDX,ENDY)：二次贝赛尔曲线
T = smooth quadratic Belzier curveto(ENDX,ENDY)：光滑二次贝塞尔曲线
A = elliptical Arc(RX,RY,rotatedeg,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位
7.<linearGradient> 可用来定义 SVG 的线性渐变。<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。线性渐变可被定义为水平、垂直或角形的渐变：
- 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
- 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
- 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
- <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
- fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
- <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
8.滤镜：留个连接害怕以后找不到
上一篇： Vue中的动画封装
下一篇： 使用webpack引入 zepto