SVG中path标签的简单使用

最新推荐文章于 2024-05-17 03:28:54 发布

么贺贵

最新推荐文章于 2024-05-17 03:28:54 发布

阅读量5.7k

点赞数 11

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

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

版权

H5学习专栏收录该内容

14 篇文章 1 订阅

订阅专栏

path标签概述

他是由命令及其参数组组成的字符串，如：

<path d="M0,0L10,20C30-10,40,20,100,100" stroke="red">

在这里插入图片描述

命名规范

区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置
最后的参数表示最终要到达的位置
上一个命令结束的位置就是下一个命令开始的位置
命令可以重复参数表示重复执行同一条命令

命令简介

M (x, y)+ 移动画笔，后面如果有重复参数，会当做是 L 命令处理
L (x, y)+ 绘制直线到指定位置
H (x)+ 绘制水平线到指定的 x 位置
V (y)+ 绘制竖直线到指定的 y 位置
m、l、h、v 使用相对位置绘制

命令	含义
M/m (x,y)+	移动当前位置
L/l (x,y)+	从当前位置绘制线段到指定位置
H/h (x)+	从当前位置绘制⽔平线到达指定的 x 坐标
V/v (y)+	从当前位置绘制竖直线到达指定的 y 坐标
Z/z	闭合当前路径
C/c (x1,y1,x2,y2,x,y)+	从当前位置绘制三次⻉塞尔曲线到指定位置
S/s (x2,y2,x,y)+	从当前位置光滑绘制三次⻉塞尔曲线到指定位置
Q/q (x1,y1,x,y)+	从当前位置绘制⼆次⻉塞尔曲线到指定位置
T/t (x,y)+	从当前位置光滑绘制⼆次⻉塞尔曲线到指定位置
A/a (rx,ry,xr,laf,sf,x,y)	从当前位置绘制弧线到指定位置

移动与直线类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg {
				width: 300px;
				height: 300px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>
		<svg>

			<!-- 
					d 定义路径，是一些列的命令集合
					M/m（x,y） 定义起始点，没有什么效果
				-->
			<path d='M20,20' stroke='red'></path>
			<!-- 
				L/l 绘制线段(x,y)+
				L 绝对位置，绘制线段，移动到某一处坐标，可以使用M重新定义起点
				l 相对位置，绘制线段，移动到某一处坐标，可以使用m重新定义起点
			-->
			<path d='M20,20 L10,50 M30,30 L50,50' stroke='red'></path>

			<path d='m20,20 l10,50 m30,30 l50,50' stroke='blue'></path>
		</svg>


		<svg>

			<!-- 
					
					路径命令：小写是相对位置，大写是绝对位置
					
					H/h（x） 水平方向绘制直线 
				-->
			<path d='m20,20 h50,150 ' stroke='red'></path>

			<!-- 结合L命令一起使用
				多个命令，要用m移动到另一端使用
			 -->
			<path d='m20,50 h150 m50,50 l150,100' stroke='green'></path>

			<!-- 垂直方向绘制线段
			  V /v(y)+ 绘制竖直线到指定的 y 位置
			 
			 -->
			<path d='m100,60 v 120' stroke='green'></path>

		</svg>
		<svg>
			<!-- 
					z 闭合当前路径
					 表示结束，并且和开始的起点连起来
				-->

			<path d="m30,100 h10 l50 0 v50 z" stroke='orange' fill="none"></path>
		</svg>
	</body>
</html>

贝塞尔曲线

二次
在这里插入图片描述
三次

光滑曲线

贝塞尔图形

C与S

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg {
				width: 300px;
				height: 300px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>
		<svg>
			<!--
				三次贝塞尔曲线
				C 
				  需要定义三个点：m的起始点,两个控制点 结束点
				-->
			<path d="M10,10 C100,100 100,150 150,10" fill="none" stroke='red'></path>

			<!-- 绘制参考点 -->
			<rect x=110 y=110 width=5 height=5></rect>
			<rect x=150 y=110 width=5 height=5></rect>

			<!-- 绘制参考线 -->
			<path d="M10,10 L100 100,150 100,150 10,300" fill="none" stroke='green'></path>
		</svg>


		<svg>
			<!--
				三次贝塞尔曲线
				S x2 y2 ,x y
				  用来表示四次贝塞尔曲线（反射性贝塞尔），在原有三次贝塞尔曲线上，加上一段贝塞尔曲线，
				  所以是与c一起使用（组合）
				-->
			<path d="M10,50 C40,10 60,10 90,50 S150,100 180,50" fill="none" stroke='red'></path>

			<!-- 绘制参考点 -->
			<rect x=40 y=10 width=5 height=5></rect>
			<rect x=60 y=10 width=5 height=5></rect>

			<rect x=150 y=100 width=5 height=5></rect>
			<rect x=120 y=100 width=5 height=5></rect>

			<!-- 绘制参考线 -->
			<!-- 	<path d="M10,10 L100 100,150 100,150 10,300" fill="none" stroke='green'></path> -->
		</svg>
	</body>
</html>

q与t

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg {
				width: 300px;
				height: 300px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>
		<svg>
			<!--
				二次贝塞尔曲线
				Q/q x1 y1 ,x y 
				  需要定义三个点：m的起始点,一个控制点 结束点
				-->
			<path d="m100,50 q100,150 180,10" fill="none" stroke='red'></path>

			<!-- 绘制参考点 -->
			<rect x=200 y=150 width=5 height=5></rect>

		</svg>

		<svg>

			<!-- 
				光滑二次贝塞尔曲线
				T/t x y
				 t和s差不多，也是一个贝塞尔曲线的延长，会根据q的控点和终点对称的一个控制点，
				 所以只需要定义一个终点就可以了
				 
				 注意：c与s q与t搭配的 t的距离是相对于q的终点绘制的
				 
			 -->
			<path d="m10,10 q50,100 100,30 t80,50" fill="none" stroke='red'></path>
		</svg>

	</body>
</html>

弧线

基本命令

A (rx, ry, xr, laf, sf, x, y) - 绘制弧线
最复杂的命令
rx - （radius-x）弧线所在椭圆的 x 半轴长
ry - （radius-y）弧线所在椭圆的 y 半轴长
xr - （xAxis-rotation）弧线所在椭圆的长轴角度
laf - （large-arc-flag）是否选择弧长较长的那一段弧
sf - （sweep-flag）是否选择逆时针方向的那一段弧
x, y - 弧的终点位置

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg {
				width: 500px;
				height: 300px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<!-- 
			• A (rx, ry, xr, laf, sf, x, y) - 绘制弧线 

			• rx - （radius-x）弧线所在椭圆的 x 半轴长 
			• ry - （radius-y）弧线所在椭圆的 y 半轴长 
			• xr - （xAxis-rotation）弧线所在椭圆的长轴角度 
			• laf -[0,1] （large-arc-flag）是否选择弧长较长的那一段弧 
			• sf - [0,1]（sweep-flag）是否选择逆时针方向的那一段弧 
			• x, y - 弧的终点位置
		 -->

		<svg>
			<!--
				顺时针绘制大弧线
				laf=1
				sf=1
			  -->
			<path d="m100,100 a200,100 0 1 1 100,100" fill='none' stroke='red'></path>
		</svg>

		<!-- 
				视野比视窗大：缩小
				视野比视窗小：放大
				视野与视窗同等大小，则不放大也不缩小
		  -->
		<svg viewBox='-200 0 500 300'>
			<!--
				逆时针绘制大弧线
				laf=1
				sf=0
			  -->
			<path d="m100,100 a200,100 0 1 0 100,100" fill='none' stroke='red'></path>
		</svg>


		<svg viewBox='0 0 500 300'>
			<!--
				逆时针绘制小弧线
				laf=0
				sf=0
			  -->
			<path d="m100,100 a200,100 0 0 0 100,100" fill='none' stroke='red'></path>
		</svg>

		<svg viewBox='0 0 500 300'>
			<!--
		 				顺时针绘制小弧线
		 				laf=0
		 				sf=1
		 			  -->
			<path d="m100,100 a200,100 0 0 1 100,100" fill='none' stroke='red'></path>
		</svg>

		<svg viewBox='0 0 500 300'>
			<!--
				xr - （xAxis-rotation）弧线所在椭圆的长轴角度 
			  -->
			<path d="m100,100 a100,50 150 1 1 100,100" fill='none' stroke='red'></path>
		</svg>
	</body>
</html>

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

么贺贵

关注

11
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
SVG中path标签的简单使用

path标签概述他是由命令及其参数组组成的字符串，如：<path d="M0,0L10,20C30-10,40,20,100,100" stroke="red">命名规范区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置最后的参数表示最终要到达的位置上一个命令结束的位置就是下一个命令开始的位置命令可以重复参数表示重复执行同一条命令命令简介M (x, y)+ 移动画笔，后面如果有重复参数，会当做是 L 命令处理L (x, y)+ 绘制直线到指定位置H (x)+
复制链接

扫一扫