08(SVG)stroke

最新推荐文章于 2024-10-07 21:26:45 发布

七色的天空

最新推荐文章于 2024-10-07 21:26:45 发布

阅读量372

点赞数 7

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

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

版权

08_新H5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<!-- 默认svg的宽300 高150 -->
	<svg width="300" height="1000" xmlns="http://www.w3.org/2000/svg" version="1.1"
	xmlns:xlink="http://www.w3.org/1999/xlink">
		
		<g>
			<path stroke="red" d="M5 20 l215 0" />
			<path stroke="green" d="M5 40 l215 0" />
			<path stroke="blue" d="M5 60 l215 0" />
		</g>


		<!-- stroke-linecap 端点描述的样式 -->
		<g stroke="black" stroke-width="6" fill="none">
			<path stroke-linecap="butt" d="M5 80 l215 0" />
			<path stroke-linecap="round" d="M5 100 l215 0" />
			<path stroke-linecap="square" d="M5 120 l215 0" />
		</g>


		<g stroke="black" stroke-width="4" fill="none">
			<path stroke-dasharray="5, 5" d="M5 140 l215 0" />
			<path stroke-dasharray="10, 10" d="M5 160 l215 0" />
			<path stroke-dasharray="20, 10, 5, 5, 5, 10" d="M5 180 l215 0" />
		</g>
	</svg>
</body>
</html>

上述运行结果：

这段代码创建了一个 SVG元素组，用来渲染一些具有不同虚线样式的直线。

<g> 元素指定了整个组的属性：

stroke="black" 设置描边颜色为黑色。
stroke-width="4"设置描边的宽度为 4 个单位。
fill="none"表示不填充任何颜色。

第一个 <path> 元素的属性：

stroke-dasharray="5,5" 设置虚线样式为 5 个实线和 5 个空白。
d="M5 140 L215 0"定义了起点 (5,140) 和终点 (220,140) 的直线路径。

第二个 <path> 元素的属性：

stroke-dasharray="10,10" 设置虚线样式为 10 个实线和 10 个空白。
d="M5 160 L220 160" 定义了起点 (5,160) 和终点 (220,160) 的直线路径。

第三个 <path>元素的属性：

stroke-dasharray="20,10,5,5,5,10" 设置虚线样式为一系列的实线和空白组合：20 个实线、10 个空白、5 个实线、5 个空白、5 个实线、10 个空白。
d="M5 180 L220 180"定义了起点 (5,180) 和终点 (220,180) 的直线路径。

这段代码的效果是在画布上绘制了三条具有不同虚线样式的水平直线。