- svg标签: 设置画图时画布的大小,其中可以通过width和height设置长宽。
<svg width=500 height=500></svg>
可以在svg标签中添加rect标签、text标签、line标签等
- rect标签:可以用来绘制矩形
<rect x=20 y=20 width=100 height=200 stroke="red" stroke_width=2 fill="blue"/>
(1)x,y表示矩形左上角的顶点所在的位置(在整个界面的左上角为0,0),一般有自带的格式,设置x,y都为0但是真正显示的位置并不一定在整个显示页面的最左上角。可以通过下面的代码消除自带的格式
<style>
html,body{
padding:0;
margin: 0;
}
</style>
rx,ry属性可以使矩形产生圆角
(2)rect标签的属性width和height设置矩形的长宽,
(3)fill属性可以设置矩形的填充颜色,
(4)stroke属性设置矩形边框的颜色,
(5)stroke_width属性设置矩形边框的宽度,
(6)fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
(7)stroke-opacity 属性定义轮廓颜色的透明度(合法的范围是:0 - 1)
(8)如果要定义整个图形的透明度可以直接用opacity标签(合法的范围是:0 - 1),
- circle标签:绘制圆形
<svg>
<circle cx="50" cy="50" r="50" stroke="blue" stroke_width=2 fill="red"/>
</svg>
(1)cx,cy表示圆心的位置,r表示半径
(2)stroke属性设置边框的颜色,stroke_width设置边框的宽度
- text标签: 可以定义文本,设置在svg标签内部
<svg id="hist01" width=500 height=500>
<text x=0 y=20 fill="red">直方图</text>
</svg>
text标签里的x,y可以设置文本的位置,fill属性可以设置文本的颜色
- line标签:用来创建线条
<line x1=0 y1=0 x2=800 y2=500 stroke="red"></line>
x1,y1表示线条起始点的位置,x2,y2表示线条结束点的位置
stroke属性用来设置颜色,stroke_width属性设置边框的宽度。
- path标签:用来定义路径
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
所有命令均允许小写字母,大写表示绝对定位,小写表示相对定位。