svg 路径未正确绘制答案

【问题标题】：svg path not drawing correctlysvg 路径未正确绘制
【发布时间】：2016-11-13 23:05:21
【问题描述】：

我正在尝试画一条关于无线电信号的简单路径。在 y 上只能提供 0 或 1，在 x 上是以纳秒为单位的延迟。

<!DOCTYPE>
<html>
	<head>
		<title>GPIO TEST</title>
		<style>
			html, body
			{
				width:100%;
				height: 100%;
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<svg width="100%" height="50%" style="border:1px solid #000;" viewBox="0 -0.2 384071041 1.2" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M 0 0 v 1 h 26379904 v 1 h 41916258 v 1 h 58997548 v 1 h 73918928 v 0 h 88221334 v 1 h 99886849 v 0 h 116664152 v 1 h 132164508 v 1 h 147551869 v 0 h 164463167 v 0 h 179546540 v 0 h 192406006 v 0 h 206892404 v 1 h 220718829 v 0 h 236095190 v 1 h 251343557 v 0 h 266534925 v 1 h 282160276 v 0 h 293355811 v 0 h 306647258 v 1 h 322362605 v 1 h 336254028 v 1 h 352724344 v 1 h 369630641 v 0 h 384071041" fill="none" stroke="#000" stroke-width="0.001"></path>
		</svg>
	</body>
</html>

我尝试将笔画宽度更改为任何可能的数字，但结果不一致。

结果应该是这样的：

【问题讨论】：

标签： html svg path draw

【解决方案1】：

我刚刚注意到，我应该将“H”用于水平线，将“V”用于垂直线，因为我只有绝对坐标，而不是 dx (delta X) 和 dy (delta Y)。

正如 MDN 所说：H x (or h dx V y (or v dy)

【讨论】：