SVG: rect всегда за линией

Question

Я создаю образец фондовой диаграммы с использованием svg, и у меня возникают проблемы с тем, чтобы элементы rect были на вершине элементов линии. Все, что я прочитал, говорит, что их просто нужно добавить в SVG. Однако это не делает трюк.

Как заставить прямоугольник появляться поверх линий?

Здесь отображается Whats:

Вот как выглядит Html как:

<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

Роберта Лонгсон является правильным: то, что вы рисуете в прошлом (то есть, что ближе к концу файла/элемента svg) находится в верхней части изображения.

Я упростил ваше изображение и показал два разных сценария: один с прямоугольником внизу, один с прямоугольником сверху. В каждом случае элемент, который появляется последним в файле 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>