在svg中创建闭合折线图的问题

我有一个创建svg折线图的反应组件（我没有使用库，只是创建了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>

来源

2016-12-27 pedalpete

关闭一个路径的最简单方法是使用Z或Z –

目前尚不清楚如何图表将显示，但是你一定意味着'大号300 0“而不是”L 0 300“。第一个数字是'x'，其次是'y'。 – Duopixel

@RobertLongson我不确定你在说什么，你能澄清吗？ – pedalpete

在SVG路径，每个信的指令，并且下面的数字是该指令的坐标。

你的路径，在一个陌生的位置结束，L 0 300是左下角的位置，但遥远的视口，则需要通过删除最后的指令并添加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"

来源

2016-12-27 11:05:30 Duopixel

现在我明白了，谢谢澄清。所以基本上我所要做的就是把最后一点指向svg'L 300 67'的第二个终点，最后一个点在最下面的开始'L 0 67'谢谢你澄清。 – pedalpete

在svg中创建闭合折线图的问题

回答

相关问题