SVG tspan元素x属性未按设定绝对位置渲染问题咨询

核心原因1：代码中混入的空白字符被识别为文本内容 #

你提供的代码中，<text>标签内的文本I love SVG!和<tspan>标签之间存在换行、缩进空格，这些空白字符会被SVG默认解析为普通文本节点，合并为单个空格追加在I love SVG!后方渲染。这部分空白的宽度会叠加形成额外偏移。
你可以直接移除标签间的空白字符修复该问题，修改后的代码参考：

<svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!<tspan x="30" y="20" fill="blue">Sub Elemenent Text!</tspan></text>
</svg>

核心原因2：字体固有侧轴承的影响 #

如果移除空白后仍存在小幅度偏移，属于字体设计的正常特性：所有字体的字符字形都会预留左侧边距（侧轴承），避免相邻字符粘连。你设置的x="30"是字体em方框的左边缘坐标，而字符实际可视的左边缘会比这个坐标大几像素，你遇到的9px偏移大概率是该特性叠加空白字符宽度共同导致的。
如果需要精准对齐，可以给tspan添加负的dx值抵消偏移，示例：<tspan x="30" dx="-9" y="20" fill="blue">Sub Elemenent Text!</tspan>

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