如何在SVG Text元素内设置贯穿式分隔线替代竖线符号

要把竖线|替换成真正的贯穿高度分隔线，不能再用文本字符实现，而是要使用SVG的图形元素（比如<line>或<rect>）——因为文本字符的高度受字体限制，无法完全覆盖文本的上下高度。具体实现步骤如下：

1. 移除原分隔符文本 #

首先删掉原来的<tspan class="t-span-seperator">|</tspan>元素，这部分是用文本字符模拟的分隔线。

2. 添加SVG图形作为分隔线 #

SVG的<text>元素内部不能嵌套图形元素，所以要把分隔线放在<text>的同级位置，通过坐标计算对齐文本的中心和高度。

修改后的完整SVG片段示例 #

<g>
  <!-- 原文本：移除竖线tspan，调整图标tspan的dx值以留出分隔线空间 -->
  <text x="-50" y="-15" dy=".6em" style="dominant-baseline: central;">
    <tspan class="t-text-seperator" dx="0em">Java Enterprise Edition</tspan>
    <tspan dx="0.7em" class="skill-icon-low"></tspan>
  </text>
  <!-- 新增的贯穿式分隔线 -->
  <line
    x1="-50"
    y1="-15 - 0.6em"
    x2="-50"
    y2="-15 + 0.6em"
    style="stroke: currentColor; stroke-width: 1px;"
    transform="translate(calc(100% + 0.35em), 0)"
  />
</g>

参数说明 #

• 位置对齐：transform="translate(calc(100% + 0.35em), 0)" 让线条自动跟随文本宽度移动，100%代表文本的实际宽度，0.35em是文本到线条的间距，和原布局的间距保持一致。
• 高度覆盖：y1="-15 - 0.6em"和y2="-15 + 0.6em" 以文本中心（y="-15"）为基准，上下各延伸0.6em，覆盖常见字体的顶部到底部高度，实现完全贯穿的效果。
• 样式匹配：stroke: currentColor让线条颜色与文本保持一致，stroke-width: 1px控制线条粗细，可根据需求调整数值。

替代方案：用矩形实现分隔线 #

如果需要更粗的分隔线，或者要自定义线条宽度，可以用<rect>代替<line>：

<rect
  x="-50"
  y="-15 - 0.6em"
  width="1px"
  height="1.2em"
  style="fill: currentColor;"
  transform="translate(calc(100% + 0.35em), 0)"
/>

这种方式实现的分隔线高度不受字体限制，视觉上更规整统一。

内容的提问来源于stack exchange，提问作者Sri