SVG-基线线

Question

正如您所见，我正在这里画些东西。

但是有一个问题：图像的最顶部和最底部的线（黑色"ruler"）仅是宽度的一半，因为该行的"base"位于中间。

对于一个文本字段，我能够重新放置dominant-baseline的位置，从而完美地放置我的文本。但是，一条线（或路径）似乎没有基线。

如何确定我的台词位于最顶部和最底部？唯一的方法是将它们硬定位在line width / 2上吗？我对此进行了测试，并且效果很好，但是，我不是硬编码这些数字的最大狂热者。有没有办法不对此进行硬编码？

这是我的代码和示例图片：

<svg width="200" height="200">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0, 0, 255);"/>
      <stop offset="50%" style="stop-color:rgb(255, 255, 255);"/>
      <stop offset="100%" style="stop-color:rgb(255, 127, 0);"/>
    </linearGradient>
  </defs>
  <rect width="20%" height="100%" fill="url(#gradient)" />
  <line x1="22%" x2="22%" y1="0%" y2="100%" style="stroke: black;"/>
  <line x1="22%" x2="24.5%" y1="0" y2="0" style="stroke: black;"/>
  <line x1="22%" x2="24.5%" y1="50%" y2="50%" style="stroke: black;"/>
  <line x1="22%" x2="24.5%" y1="100%" y2="100%" style="stroke: black;"/>
  <text x="25%" y="0%" dominant-baseline="hanging">Top text</text>
  <text x="25%" y="50%" dominant-baseline="middle">
    <tspan x="25%" dy="-3%">middle text 1</tspan>
    <tspan x="25%" dy="6%">middle text 2</tspan>
  </text>
  <text x="25%" y="100%">bottom text</text>
</svg>

如果您想尝试，这里是小提琴。只是放大真的很远。 https://jsfiddle.net/jkom2x8f/1/

Answer 1

您的解决方案是正确的解决方案。这是唯一真正的解决方案。没问题。

Answer 2

似乎经过大量搜索和阅读注释，我得出的结论是，将y位置硬编码为0.5和199.5是唯一的方法：

<svg width="200" height="200">
    <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(0, 0, 255);"/>
            <stop offset="50%" style="stop-color:rgb(255, 255, 255);"/>
            <stop offset="100%" style="stop-color:rgb(255, 127, 0);"/>
        </linearGradient>
    </defs>
    <rect width="20%" height="100%" fill="url(#gradient)" />
    <line x1="22%" x2="22%" y1="0%" y2="100%" style="stroke: black;"/>
    <line x1="22%" x2="24.5%" y1="0.5" y2="0.5" style="stroke: black;"/>
    <line x1="22%" x2="24.5%" y1="50%" y2="50%" style="stroke: black;"/>
    <line x1="22%" x2="24.5%" y1="199.5" y2="199.5" style="stroke: black;"/>
    <text x="25%" y="0%" dominant-baseline="hanging">Top text</text>
    <text x="25%" y="50%" dominant-baseline="middle">
        <tspan x="25%" dy="-3%">middle text 1</tspan>
        <tspan x="25%" dy="6%">middle text 2</tspan>
    </text>
    <text x="25%" y="100%">bottom text</text>
</svg>

这是一个小提琴： https://jsfiddle.net/jkom2x8f/5/