1、先上个图看一下效果:
这里面有直线、圆、矩形、椭圆、多边形。
SVG 可缩放矢量图形(Scalable Vector Graphics)。
SVG 使用 XML 格式定义图像。
2、代码实现:
<svg width="500" height="200" viewBox="-100 -100 500 200"><linex1="0"y1="-75"x2="170"y2="-75"style="stroke: rgb(0, 0, 0); stroke-width: 1"/><ellipse cx="150" cy="10" rx="70" ry="50" style="fill: #3232ff;stroke:#f2f2f2;stroke-width:1" /><circle cx="0" cy="20" r="70" fill="#D1495B" /><circlecx="0"cy="-75"r="12"fill="none"stroke="#F79257"stroke-width="2"/><rect x="-17.5" y="-65" width="35" height="20" fill="#F71257" /><polygon points="100,10 250,50 130,100" style="fill:lime;stroke:purple;stroke-width:1" />
3、图形说明:
1)直线line:二点确定一条直线:开始点(x1,y1) 结束点(x2,y2)。
2)椭圆ellipse:圆心(cx,cy) , rx:x轴方向上的半径,ry:y轴方向上的半径。如果rx=ry那么将会是一个圆,而不在是一个椭圆形。
3)圆circle:圆心(cx,cy) ,半径:r。
4)矩形rect:左上角的点(x,y),宽度:width,高度:height
5)多边形polygon: points定义了点的集合-- p1(100,10) p2 (250,50) p3 (130,100),点义了三个点,然后我们将三个点,用直线连接起来,就成为了一个三角形。
多个点之间用空格来分隔,并不是以逗号来分隔开的。
4、fill、stroke、stroke-width说明:
fill:填充区域颜色。
stroke:边的颜色。
stroke-width:边的宽度。
5、viewBox
这个类似于矩形rect。左上角的点(x,y),宽度:width,高度:height。
viewbox属性的值是一个包含4个参数的列表,分别是
min-x
、min-y
、width
、height
,以空格或者逗号分隔开。
以上是SVG的几个基本的图形的说明,对于我们在使用@antv/x6的时候提供了一定的基础。