介绍

SVG是可缩放的矢量图形,相比位图,他无论如何缩放都不会造成失真,因为它是动态计算的,html中支持svg标签,svg也提供了若干的基础图形接口

矩形

绘制一个矩形使用标签,可以设置的属性有:x,y,width,height,fill,还可以通过style属性来设置css的一些样式,使用rx,ry还可以绘制圆角效果,如:

<svg >
    <rect x="0" y="0" width="100" height="100"
    fill="red" rx="10" ry="10"
    stroke="pink" stroke-width="5" id="rect">
    </rect>
</svg>

绘制圆可以使用标签,形状定义主要使用这几个属性:cx,cy,r,也可以使用属性定义各种样式

如:

<svg width="500" height="500">
	<circle cx="250" cy="250" r="200" fill="pink" stroke="pink" stroke-width="5">
	</circle>
</svg>

椭圆

椭圆的绘制使用标签,椭圆与圆不同,椭圆有长半轴和短半轴之分,因此形状的定义有四个属性cx,cy,rx,ry分别表示x坐标,y坐标和两个半轴.

如:

<svg width="500" height="500">
    <ellipse cx="250" cy="250" rx="120" ry="75" fill="pink" stroke="pink" stroke-width="5">
    </ellipse>
</svg>

线条

线条使用标签来定义,这个线条是直线,所以定义形状的有四个属性x1,y1,x2,y2,分别表示直线两端的位置

如:

	<svg width="500" height="500">
		<line x1="200" y1="250" x2="300" y2="250" fill="pink" stroke="pink" stroke-width="5">
		</line>
	</svg>

多边形

多边形使用标签来定义,一个多边形使用的角的位置来定义形状,使用points属性来定义角的位置

如:

	<svg width="500" height="500">
		<polygon points="250,10 200,200 300,200" fill="pink" stroke="pink" stroke-width="5">
		</polygon>
	</svg>

折线

折线与多边形相似,也使用points属性来控制折线的转折点

如:

	<svg width="500" height="500">
		<polyline points="250,10 200,200 300,200" fill="pink" stroke="pink" stroke-width="1">

		</polygon>
	</svg>
🌹💗正文结束💗🌹