svg标签
<svg width="50" height="40" viewBox="0 0 100 100"></svg>
名称 |
用法 |
描述 |
width |
width=“50” |
SVG代码所占用的宽度 |
height |
height=“40” |
SVG代码所占用的高度 |
viewBox |
viewBox=“x, y, width, height” |
x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度 |
路径 path
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L211 200 Z" />
</svg>
名称 |
用法 |
描述 |
d |
d=“M0,0 L240,0 L240,240 L0,240 Z” |
绘图路径,path上最复杂也是最重要的属性,下面一个表格将介绍 d属性上各个字母所代表的含义 |
fill |
fill="#fff",fill=“url(#orange_red)” |
填充颜色,渐变填充 |
fill-opacity |
fill-opacity=“0” |
填充透明度,填充不给颜色默认是黑色,不想用填充颜色的可以把填充设置透明 |
stroke |
width=“50” |
描边颜色,描边渐变 |
stroke-width |
width=“50” |
描边宽度 |
stroke-linecap |
width=“50” |
路径两端的形状, 可选属性 butt |
transform |
width=“50” |
形变,和css3 transform属性用法一致 |
path标签中的d属性介绍
名称 |
用法 |
描述 |
M |
M0,0 |
相当于 moveto(M X,Y),将画笔移动到指定的坐标位置 |
L |
L240,0 |
相当于 lineto(L X,Y),画直线到指定的坐标位置 |
H |
H240 |
相当于 horizontal lineto(H X),画水平线到指定的X坐标位置 |
V |
V240 |
相当于 vertical lineto(V Y),画垂直线到指定的Y坐标位置 |
C |
CX1,Y1,X2,Y2,ENDX,ENDY |
相当于 curveto(C X1,Y1,X2,Y2,ENDX,ENDY),三次贝赛曲线 |
S |
SX2,Y2,ENDX,ENDY |
相当于 smooth curveto(S X2,Y2,ENDX,ENDY),平滑曲率 |
Q |
QX,Y,ENDX,ENDY |
相当于 quadratic Belzier curve(Q X,Y,ENDX,ENDY),二次贝赛曲线 |
T |
TENDX,ENDY |
相当于 smooth quadratic Belzier curveto(T ENDX,ENDY),映射 |
A |
ARX,RY,XROTATION,FLAG1,FLAG2,X,Y |
相当于 elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y),弧线 |
Z |
Z |
相当于 closepath(),关闭路径 |
矩形 rect
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" rx="20" ry="20" width="300" height="100" style="fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0); fill-opacity:0.1; stroke-opacity:0.9;" />
</svg>
圆形 circle
<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>
椭圆 ellipse
直线 line
多边形 polygon
曲线 polyline
文本 text