可缩放矢量图形-SVG

最新推荐文章于 2024-08-22 06:07:10 发布

原创最新推荐文章于 2024-08-22 06:07:10 发布 · 690 阅读

CC 4.0 BY-SA版权

本文介绍了SVG（可缩放矢量图形）的基本概念，强调其无损缩放特性，并通过实例展示了如何使用SVG标签创建矩形、圆形、椭圆、线条、多边形和折线。SVG为HTML提供了丰富的图形接口，支持动态计算，允许通过属性和CSS样式进行自定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

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>

??正文结束??