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
不错啊