在 svg 中创建闭合折线图时遇到问题

Question

我有一个正在创建 svg 折线图的 React 组件（我没有使用库，只是创建 svg 本身）。

问题是，当我将终点添加到 return 到起点的路径时，我在图表的末尾出现了一个奇怪的 45 度角。

任何人都可以解释为什么这没有很好地关闭吗？

据我了解，最后的L 0 300应该是return到原点的路径。

这是代码

<svg width="300" height="67.40652464075235">
  <path fill="blue" stroke="black" 
d="M 0 40.32613081539207
L 0.15306122448979592 40.990776224724726 
L 0.25510204081632654 41.834373941621585 
L 0.30612244897959184 62.31225269212592 
L 299.0816326530612 45.84534164491692 
L 299.33673469387753 65.256033885832 
L 299.48979591836735 45.314084715607414 
L 300 45.27080004137377 L 0 300 "></path>
</svg>

Answer 1

在 SVG 路径中，每个字母都是一条指令，后面的数字是该指令的坐标。

你的路径在一个奇怪的位置结束，L 0 300 是左下角的位置但远离视口，你需要 "draw" 通过删除最后一条指令并添加到图表的底部L 300 67（右下角）和 L 0 67（左下角）。将它们放在一起，您的路径需要如下所示：

d="M 0 40.32613081539207
L 0.15306122448979592 40.990776224724726 
L 0.25510204081632654 41.834373941621585 
L 0.30612244897959184 62.31225269212592 
L 299.0816326530612 45.84534164491692 
L 299.33673469387753 65.256033885832 
L 299.48979591836735 45.314084715607414 
L 300 45.27080004137377 L 300 67 L 0 67"

在 svg 中创建闭合折线图时遇到问题

Trouble creating a closed line chart in svg

svg

linechart