Question

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

问题是，当我在路径上添加一个返回起点的最终点时，我会在图表的末尾显示一个奇怪的45度角。

任何人都可以解释为什么这个关闭不好吗？

的示例

根据我的理解，最终的L 0 300应该返回原点的路径。

这是代码

<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是左下角的位置，但离视口不远，您需要＆＃34;绘制＆＃34;删除最后一条指令并添加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中创建封闭折线图

1 个答案: