SVG文本截断修复与标题对齐调整技术求助

一、解决"Does"文本截断问题 #

文本截断通常是因为文本被限制了固定长度、父容器裁剪或坐标位置超出SVG可视范围，对应调整方案：

• 若<text>元素设置了textLength属性，直接删除该属性（或修改为足够容纳文本的数值），让文本自动适配长度；
• 检查是否存在clip-path或overflow="hidden"的父元素，调整裁剪区域范围或移除裁剪限制；
• 调整<text>的x坐标，为文本留出足够的显示空间，避免超出SVG的viewBox边界。

二、标题布局调整（对齐中间虚线） #

假设中间虚线的x轴坐标为300px（可根据实际SVG修改），按以下方式设置两个标题：

1. "Does not arrive next day" 左对齐到虚线左侧并留间距 #

设置文本右对齐，将x值设为虚线坐标减去预留间距（比如290px，预留10px间距）：

<text x="290" y="100" text-anchor="end" dominant-baseline="middle">Does not arrive next day</text>

• text-anchor="end"：让文本以x坐标为右端点对齐；
• dominant-baseline="middle"：确保文本垂直居中于虚线高度。

2. "Arrives next day" 从虚线右侧开始显示 #

将x值设为虚线坐标加上预留间距（比如310px），保持默认左对齐即可：

<text x="310" y="100" dominant-baseline="middle">Arrives next day</text>

完整修改示例 #

结合中间虚线的SVG代码示例：

<svg width="600" height="200" viewBox="0 0 600 200">
  <!-- 解决截断的Does文本 -->
  <text x="50" y="50" font-size="16">Does</text>

  <!-- 中间虚线 -->
  <line x1="300" y1="80" x2="300" y2="120" stroke="#999" stroke-dasharray="4,3"/>

  <!-- 左侧标题 -->
  <text x="290" y="100" text-anchor="end" dominant-baseline="middle" font-size="16">Does not arrive next day</text>

  <!-- 右侧标题 -->
  <text x="310" y="100" dominant-baseline="middle" font-size="16">Arrives next day</text>
</svg>

额外注意事项 #

• 如果标题需要换行，使用<tspan>标签拆分文本并设置dy属性调整行间距，同时保持text-anchor一致；
• 若使用百分比坐标（比如x="50%"），需确保SVG的viewBox设置正确，避免坐标偏移；
• 检查字体大小是否过大导致文本超出范围，可适当调整font-size适配布局。

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