SVG：rectは常に行の後ろにあります

Question

svgを使用してサンプルの株価チャートを作成していますが、rect要素をline要素の上に置くことができません。私が読んだことはすべて、SVGに最初に追加するだけでいいということです。しかし、そのトリックをやっていません。

rectを行の上に表示するにはどうすればよいですか？ここで

が表示されていただきましたです：ロバートLongsonさんのコメントが正しい

<svg height="110" width="105"> 
 
    <rect width="5" height="28" x="7.5" y="22" style="stroke:black; stroke-width:1; fill:red"></rect> 
 
    <rect width="5" height="12" x="27.5" y="49.5" style="stroke:black; stroke-width:1; fill:red"></rect> 
 
    <rect width="5" height="39" x="47.5" y="22" style="stroke:black; stroke-width:1; fill:white"></rect> 
 
    <rect width="5" height="7" x="67.5" y="22" style="stroke:black; stroke-width:1; fill:red"></rect> 
 
    <line x1="0" y1="35.6666666666667" x2="20" y2="30" style="stroke:limegreen; stroke-width:4"></line> 
 
    <line x1="0" y1="22" x2="20" y2="49.5" style="stroke:red; stroke-width:4"></line> 
 
    <line x1="20" y1="30" x2="40" y2="35.3333333333333" style="stroke:limegreen; stroke-width:4"></line> 
 
    <line x1="20" y1="49.5" x2="40" y2="61" style="stroke:red; stroke-width:4"></line> 
 
    <line x1="40" y1="35.3333333333333" x2="60" y2="41.6666666666667" style="stroke:limegreen; stroke-width:4"></line> 
 
    <line x1="40" y1="61" x2="60" y2="22" style="stroke:red; stroke-width:4"></line> 
 
    <line x1="60" y1="41.6666666666667" x2="80" y2="46.6666666666667" style="stroke:limegreen; stroke-width:4"></line> 
 
    <line x1="60" y1="22" x2="80" y2="29" style="stroke:red; stroke-width:4"></line> 
 
</svg>

Answer 1

：あなたが最後にペイントものをここで

は次のようにHTMLが見えるものです（つまり、svgファイル/要素の終わりに近い部分）が画像の上部に表示されます。

私はイメージを簡略化し、2つの異なるシナリオを示しました.1つは、下部に長方形があり、もう1つは上部に長方形があります。いずれの場合も、SVGファイルの最後に来る要素は、画像の「上」にある要素です。

<div> 
 
    black & white rectangle is first in SVG element & is on "bottom" of image 
 
    <div> 
 
    <svg height="90" width="105"> 
 
     <rect width="5" height="39" x="47.5" y="22" style="stroke:black; stroke-width:1; fill:white"></rect> 
 
     <line x1="40" y1="61" x2="60" y2="22" style="stroke:red; stroke-width:4"></line> 
 
    </svg> 
 
    </div> 
 
    black & white rectangle is last in SVG element & is on "top" of image 
 
    <div> 
 
    <svg height="90" width="105"> 
 
     <line x1="40" y1="61" x2="60" y2="22" style="stroke:red; stroke-width:4"></line> 
 
     <rect width="5" height="39" x="47.5" y="22" style="stroke:black; stroke-width:1; fill:white"></rect> 
 
    </svg> 
 
    </div> 
 
</div>