svg 用法详解

网上收录了一些svg常用的用法,在这里总结一下。

一. svg标签


名称 用法 描述
width width=“50” SVG代码所占用的宽度
height height=“40” SVG代码所占用的高度
viewBox viewBox=“0 0 100 100” viewBox=“x, y, width, height” // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度

svg 用法详解_第1张图片

二. path标签


 

名称 用法 描述
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 stroke="#000",stroke=“url(#orange_red)” 描边颜色,描边渐变
stroke-width stroke-width=“10” 描边宽度
stroke-linecap stroke-linecap=“square” 路径两端的形状, 可选属性 butt
transform transform=“translate(5,5)” 形变,和css3 transform属性用法一致

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(),关闭路径

你可能感兴趣的:(svg)