一、了解SVG
定义：SVG是一种用XML定义的语言，用来描述二维矢量/栅格图形；SVG提供了三种类型的图形对象：矢量图形，图像，文本
优势
- SVG图形是可交互和动态
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强
- SVG 可以与 JavaScript 技术一起运行
二、SVG基础
一、认识svg
// svg标签可设置宽高
// xmlns定义命名空间
// version 版本号
// circle标签创建圆形 cx,cy代表（x,y）坐标，不设置默认（0,0）r:半径 stroke:边框颜色，stroke-width：边框的宽度 fill：填充色
<svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
</svg>
二、svg的几种引入方式
- 使用 <embed> 标签
<embed src="circle1.svg" type="image/svg+xml" />
- 使用<object>标签
<object data="circle1.svg" type="image/svg+xml"></object>
- 使用<iframe>标签
<iframe src="circle1.svg"></iframe>
- 直接在HTML文件中嵌入svg标签
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
- 链接跳转到svg文件
<a href="circle1.svg">View SVG file</a>
三、认识svg的几种形状
svg预定义的形状元素：矩形<rect> 圆形<circle> 椭圆<ellipse> 线<line> 折线<polyline> 多边形<polygon> 路径<path>
- 矩形<rect>
<svg class="svg-rect" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" stroke="rgb(0, 0, 0)" stroke-width="2" fill="green"></rect>
</svg>
属性：width，height
stroke: 边框颜色； stroke-width: 边框宽度；fill：填充背景色；fill-opacity: 0-1，填充背景色的透明度；
stroke-opacity：0-1，边框透明度；opacity：0-1，整体透明度；x,y：坐标；rx,ry:圆角
rect.png
image.png
- 圆形<circle>
// circle标签创建圆形 cx,cy代表（x,y）坐标，不设置默认（0,0）r:半径 stroke:边框颜色，stroke-width：边框的宽度 fill：填充色
<svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
</svg>
circle.png
image.png
- 椭圆<ellipse>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="102" cy="80" rx="100" ry="50" style="fill:yellow; stroke:purple; stroke-width:2;"/>
</svg>
cx,cy:坐标；rx:x轴半径；yx:y轴半径
ellipse.png
image.png
- 直线<line>
<svg class="line" xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255, 0, 0); stroke-width:2;"/>
</svg>
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
1:开始；2：结束；
image.png
- 多边形<polygon>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
fill-rule: 用于复杂相交的图形如何判断其内部
属性值：nonzero ‘非零’ evenodd ‘奇偶’
polygon.png
image.png
- 曲线 <polyline>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
polyline.png
image.png
- 路径<path>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
path.png
- 文本
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>
- stroke属性
stroke: 边框颜色； stroke-width: 边框宽度； stroke-dasharray:5,5; 创建虚线；
stroke-linecap：butt/round/square 不同类型的开放路径的终结
四、滤镜
- 模糊效果
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
<filter>元素id属性定义一个滤镜的唯一名称
<feGaussianBlur>元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜
- 阴影
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
持续更新中........
