SVG 矩形、圆形、椭圆、线、折线和多边形的绘制

最新推荐文章于 2025-05-17 11:57:01 发布

原创最新推荐文章于 2025-05-17 11:57:01 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#svg #html5 #前端

H5学习专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用SVG（可缩放矢量图形）绘制多种基本图形，包括矩形、圆形、椭圆、线、折线及多边形，并讲解了填充、描边和变换等关键属性。

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

一、矩形 < rect >

x
y
width
height
rx
ry

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#svg-wrap {
				/* 
					svg与canvas不用，svg可以使用css和行内样式设置宽高。
				 */
				width: 500px;
				height: 500px;
				border: 1px solid #008000;
			}
		</style>
	</head>
	<body>
		<svg id="svg-wrap" xmlns="http://www.w3.org/2000/svg">
			<!-- 通过rect绘制矩形 -->
			<rect x='100' y="100" width="100" height="100" fill="pink" stroke='#008000'>
			</rect>
			<!-- 
			    矩形基于svg画布左上角的xy坐标
				x='300'
				y="300"
				设置矩形的宽高
				width="100"
				height="100"
				
				设置形状的样式
				style="fill: skyblue;"
				
				设置矩形的圆角
				注意：如果rx与ry的值相等，可以只设置一个，如果只写了rx，那么ry也会引用rx的值
				rx='10'
				ry='20'
			 
			-->
			<!-- 通过rect绘制圆角矩形 -->
			<rect x='300' y="300" width="100" height="100" style="fill: skyblue;" rx='10' ry='20'></rect>
		</svg>
	</body>
</html>

二、圆形 < circle >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#svg-wrap {
				/* 
					svg与canvas不用，svg可以使用css和行内样式设置宽高。
				 */
				width: 500px;
				height: 500px;
				border: 1px solid #008000;
			}
		</style>
	</head>
	<body>
		<svg id="svg-wrap" xmlns="http://www.w3.org/2000/svg">
			<!-- 
				 • cx 圆点的x
				 • cy 圆点的y
				 • r 半径
			 -->
			<circle cx='100' cy='100' r='60' style='fill: #FF6600;'></circle>
			<circle cx='100' cy='100' r='40' style='fill: #FFFF00;'></circle>
		</svg>
	</body>
</html>

三、椭圆 < ellipse >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#svg-wrap {
				/* 
					svg与canvas不用，svg可以使用css和行内样式设置宽高。
				 */
				width: 500px;
				height: 500px;
				border: 1px solid #008000;
			}
		</style>
	</head>
	<body>
		<svg id="svg-wrap" xmlns="http://www.w3.org/2000/svg">
			<!-- 
				椭圆中心 x与y坐标
				• cx 
				• cy 
				椭圆水平半径与垂直半径
				• rx 
				• ry
			 -->
			<ellipse cx='100' cy='100' rx='60' ry='30' style='fill: #FF6600;'></ellipse>
		</svg>
	</body>
</html>

四、线 < line >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#svg-wrap {
				/* 
					svg与canvas不用，svg可以使用css和行内样式设置宽高。
				 */
				width: 500px;
				height: 500px;
				border: 1px solid #008000;
			}
		</style>
	</head>
	<body>
		<svg id="svg-wrap" xmlns="http://www.w3.org/2000/svg">
			<!-- 
				线段起始坐标
				• x1 
				• y1 
				线段的结束坐标
				• x2 
				• y2

			 -->
			<line x1='5' y1='5' x2='100' y2='100' style='stroke: red; stroke-width: 2;'></line>
			<line x1='150' y1='150' x2='300' y2='300' style='stroke: red; stroke-width: 2;'></line>

		</svg>
	</body>
</html>

五、折线 < polyline >

(xi, yi)+

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#svg-wrap {
				/* 
					svg与canvas不用，svg可以使用css和行内样式设置宽高。
				 */
				width: 500px;
				height: 500px;
				border: 1px solid #008000;
			}
		</style>
	</head>
	<body>
		<svg id="svg-wrap" xmlns="http://www.w3.org/2000/svg">
			<!-- 
			• points 
				‣ 格式：(xi, yi)+

				
				fill:填充颜色,默认颜色是黑色
				fill='none'
				none是不填充颜色
				
				polyline 可以绘制任何有直线的形状
			 -->

			<polyline points='20,20,40,25,60,40,80,120,120,140,200,180' stroke='red' fill='none'>

			</polyline>

		</svg>
	</body>
</html>

六、多边形< polygon >

(xi, yi)+

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#svg-wrap {
				/* 
					svg与canvas不用，svg可以使用css和行内样式设置宽高。
				 */
				width: 500px;
				height: 500px;
				border: 1px solid #008000;
			}
		</style>
	</head>
	<body>
		<svg id="svg-wrap" xmlns="http://www.w3.org/2000/svg">
			<!-- 
			• points 
				‣ 格式：(xi, yi)+

				
				fill:填充颜色,默认颜色是黑色
				fill='none'
				none是不填充颜色
				
				polygon 画含不少于三个边的图形,
				多边形是由直线组成的，形状是封闭的(所有的线条连接起来)
			 -->

			<!-- <polygon
				points='20,20,40,25,60,40,80,120,120,140,200,180'
				
				stroke='red'
				fill='none'
			>
			</polygon> -->


			<!-- 绘制三角形 -->
			<polygon points='200,10,250,190,160,120' stroke='red' fill='none'>

			</polygon>
		</svg>
	</body>
</html>