06(SVG)路径

最新推荐文章于 2024-10-07 09:24:46 发布

七色的天空

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量323

点赞数 9

分类专栏： 08_新H5 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/q506174602/article/details/135266112

版权

08_新H5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在SVG中，<path>标签用于绘制复杂的路径图形。<path>标签允许你通过指定一系列的绘制命令来创建曲线、直线<path>和其他形状。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>路径</title>
</head>
<body onclick="getPoints()">
	<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1">
		<!--  
			大写表示绝对定位  小写表示相对定位
		M: move to 将画笔移动到指定位置
		L: line to 画直线到指定位置
		H: horizontal lineto 画水平线到指定位置
		V: vertical lineto 画垂直线到指定位置
		Z: closepath 关闭路径

		C: curveto 贝塞尔曲线
		S: smooth curveto
		Q: quadratic beizier curve
		A: elliptical Arc 弧线
		-->
		<path d="M150 0 L75 200 L225 200 Z" style="fill: green; stroke: red" />
	</svg>

	<script type="text/javascript" src="../tool.js"></script>
</body>
</html>

上述运行结果：

<path>标签有一个主要属性：

d属性：用于定义路径命令。它接受一个字符串值，该字符串包含了一系列的命令和参数，用于描述路径的轮廓和形状。常见的路径命令包括M（移动到）、L（直线到）、C（三次贝塞尔曲线到）等。

以下是一个使用<path>标签绘制路径的示例：

<svg width="200" height="200">
  <path d="M10 10 L50 50 C70 80 120 150 180 50" fill="none" stroke="black" />
</svg>

上述代码使用<path>标签绘制了一条路径，通过d属性指定了三个命令：M10 10（从点(10, 10)开始移动）、L50 50（直线到点(50, 50)）和C70 80 120 150 180 50（三次贝塞尔曲线到点(180, 50)，控制点为(70, 80)和(120, 150)。

fill属性被设置为"none"，意味着路径不填充任何颜色。stroke属性stroke被设置为"black"，以黑色绘制路径的轮廓线。