如何使SVG文本位置依赖另一文本？实现响应式间距

嘿，我来帮你搞定这个SVG文本排版的需求！首先直接回答你的疑问：原生SVG并不支持y=".text--line2.y"这种直接引用其他元素属性的语法，不过我们有更靠谱的方案来实现你要的「固定相对位置+响应式间距」效果，下面给你两种实用方法：

方法一：用<tspan>整合两个文本（最推荐） #

把两行文本放在同一个<text>元素里，用<tspan>来换行并控制间距。这种方式不仅能保证两行文本的相对位置完全固定，还能通过相对单位（比如em）实现响应式间距——SVG缩放或字体大小变化时，间距会自动按比例调整。

修改你的SVG代码里的<symbol>部分：

<symbol id="s-text">
  <text text-anchor="middle" x="50%" y="50%" class="text--line">
    <!-- 第一行文本，dy=0表示和父text的y坐标一致 -->
    <tspan x="50%" dy="0">sdsds</tspan>
    <!-- 第二行文本，dy=1.8em表示相对于上一行向下偏移1.8倍字体高度，可按需调整 -->
    <tspan x="50%" dy="1.8em">gfgfg</tspan>
  </text>
</symbol>

• 这里的dy值用em单位，会跟着字体大小变化；同时因为整个<text>的位置基于viewBox的百分比，SVG缩放时，两行文本的相对位置和间距都会同步响应。
• 把两个文本的x都设为50%，保证水平居中对齐，相对位置更稳定。

方法二：分开<text>元素，用相对坐标控制间距 #

如果你一定要保留两个独立的<text>元素，可以用基于viewBox的百分比或calc()来定义位置，让第二行的y坐标基于第一行的位置计算，实现固定相对位置和响应式间距：

修改后的<symbol>代码：

<symbol id="s-text">
  <text text-anchor="middle" x="50%" y="40%" class="text--line">sdsds</text>
  <!-- 用calc()让第二行在第一行基础上向下偏移18%的viewBox高度，可调整数值 -->
  <text text-anchor="middle" x="50%" y="calc(40% + 18%)" class="text--line2">gfgfg</text>
</symbol>

• 这里的18%是相对于SVG viewBox的高度（你的viewBox是0 0 800 600，所以18%就是108px），当SVG尺寸缩放时，这个间距会按比例放大/缩小。
• 如果需要兼容旧浏览器，也可以直接计算出最终的百分比（比如40%+18%=58%），把第二行的y设为58%即可。

额外优化提示 #

1. 你原来的代码里第一行文本的x是42%，第二行是50%，建议统一设为50%，保证两行水平对齐，相对位置更规整。
2. 你的CSS里.text--line设置了font-size: .5em，这个em是继承自SVG的font:5em/1 Arial，所以最终字体大小是2.5em，用em作为间距单位会和字体大小联动，响应性更好。

这样修改后，两行文本就会始终保持固定的相对位置，而且间距会随着SVG尺寸的变化自动调整啦！

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