SVG：rect始终排在后面

Question

我正在使用svg创建一个样本股票图表，我无法将rect元素放在行元素之上。我读过的所有内容都说他们只需要先添加到SVG中。但是，这并没有成功。

如何让矩形显示在行顶部？

以下是显示内容：

这是Html的样子：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Robert Longson的评论是正确的：你最后画的是什么（即svg文件/元素的末尾附近）是在图像的顶部。

我简化了你的图像，并展示了两种不同的场景，一种是底部的矩形，另一种是顶部的矩形。在每种情况下，SVG文件中最后一个元素是＆＃34; top＆＃34;图像。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;