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

最新推荐文章于 2024-05-27 14:28:36 发布

么贺贵

最新推荐文章于 2024-05-27 14:28:36 发布

阅读量2.4k

点赞数 6

分类专栏： H5学习文章标签： svg html5 前端

本文链接：https://blog.csdn.net/ayhg1/article/details/118244469

版权

H5学习专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、矩形 < 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>

七、填充、描边、变换

fill
stroke
stroke-width
transform

制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！

么贺贵

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
SVG 矩形、圆形、椭圆、线、折线和多边形的绘制

一、矩形 < rect >xywidthheightrxry<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #svg-wrap { /* svg与canvas不用，svg可以使用css和行内样式设置宽高。 *
复制链接

扫一扫