在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中創建閉合折線圖的問題

回答

相關問題