1. svg标签svg
SVG 代码都放在顶层标签svg之中，可以指定宽高，可使用相对单位和绝对单位，默认300px*150px。还可指定视口大小viewBox（这点还不太理解）。
<svg width="100%" height="100%" viewBox="50 50 50 50">
<circle cx="50" cy="50" r="50" />
</svg>
svg下标签公共属性：
stroke：描边色
stroke-width：边框宽度
stroke-linecap：定义开放路径的起止点样式(butt\round\square)
stroke-linejoin：描边转角的表现方式(miter\round\bevel)
stroke-miterlimit：描边相交（锐角）的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思，值越大，损耗越小。（不懂）
stroke-dasharray：用于创建虚线，按照实线-虚线顺序(10,10\5,5,10,10\……)
stroke-dashoffset：虚线的起始偏移
stroke-opacity：描边透明度
2. circle标签：绘制圆
<circle cx="50" cy="50" r="50" />
标签属性：
cx：横坐标
cy：纵坐标
r：半径
css属性：
fill：填充色(none/#ffffff)
3. line标签：绘制直线
<line x1="0" y1="0" x2="200" y2="0" />
标签属性：
x1,y1：起点横纵坐标
x2,y2：终点横纵坐标
css属性：
4. polyline标签：绘制折线
<polyline points="3,3 30,28 3,53" />
标签属性：
points：每个端点坐标，用空格分隔
css属性：
5. rect标签：绘制矩形
<rect x="0" y="0" height="100" width="200" />
标签属性：
x,y：起点横纵坐标
height：矩形高度
width：矩形宽度
css属性：
fill：填充色
height：矩形高度
width：矩形宽度
6. ellipse标签：绘制椭圆
<ellipse cx="60" cy="60" rx="20" ry="40" stroke="black" stroke-width="5" fill="silver"/>
标签属性：
cx,cy：椭圆中心横纵坐标
rx,ry：横纵轴半径
css属性：
fill：填充色
7. polygon标签：绘制多边形
<polygon points="0,0 100,0 100,100 0,100 0,0"/>
标签属性：
points：各个端点坐标
css属性：
fill：填充色
8. path标签：绘制路径
<path d="M 0,0 L 124,0 L 124,40 L 0,40 Z"></path>
标签属性：
d：绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标
M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径
css属性：
fill：填充色
9. text标签：绘制文本
<text x="50" y="25">Hello World</text>
标签属性：
x,y：文本区块基线（baseline）起点的横坐标和纵坐标
css属性：
fill：填充色，即字体颜色
10. use标签：复制形状，形状的范围未确定，已知path路径无法复制
<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
标签属性：
x,y：起始坐标
width,height：？
11. g标签：将多个形状组成一个组，方便复用
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
12. defs标签：用于自定义形状，它内部的代码不会显示，仅供引用。
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>
<use href="#myCircle" x="0" y="0" />
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
13. 待更新……
demo
使用过程的一些问题：
- IE浏览器均不支持svg动画；
- svg绘制的路径以路径为中心，无法控制绘制在路径左边或者右边；
- js获取路径长度
//var path = document.querySelector('path');
//var length = path.getTotalLength();
1 条评论
Ice Panpan · 2018-09-29 17:30
不错啊