svgで閉じた線グラフを作成する際に問題が発生しました

Question

私はsvg線図を作成する反応コンポーネントを持っています（私はライブラリを使用せず、単にsvgを作成しています）。

問題は、出発点に戻るためにパスに最終点を追加すると、グラフの最後に奇妙な45度の角度が表示されます。

これはうまくいけない理由は誰にも説明できますか？ここで

は、私が理解から、例https://jsfiddle.net/7svavrmu/1/

だ、最終L 0 300は、原点へのパスを返すべきです。

ここSVGパスにおいてコード

<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

だ、それぞれの文字は、命令であり、以下の数字は、その命令の座標です。

パスが奇妙な場所で終わり、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"