SVG：矩形总是落后于线

Question

我正在使用 svg 创建示例股票图表，但我无法将矩形元素置于线条元素之上。我读过的所有内容都说它们只需要先添加到 SVG 中。然而，这并不能解决问题。

如何让矩形出现在行的顶部？

显示内容如下：

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

Robert Longson 的评论是正确的：您最后绘制的内容（即靠近 svg file/element 末尾的内容）在图像的顶部。

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

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

SVG：矩形总是落后于线

SVG: rect is always behind line

html

svg

line

rect