SVG中y坐标与设置值不匹配：viewbox下文本y值异常咨询

这是SVG文本元素的坐标规则导致的：<text>元素的y属性默认对应**字体基线（baseline）**的位置，而非文本块的底部。字体基线是大多数字符（比如x）的底部对齐线，但g、y这类字母会延伸到基线下方（也就是字体的descender区域）。当你把基线设为y=100时，文本的实际底部会落在y=100加上descender高度的位置，所以你看到的实际偏移值会比设置的100大，控制台输出的115左右就是包含descender后的整体文本底部位置。

SVG.js的y()方法直接映射到<text>元素的y属性，所以设置y(height)只是把基线放在viewbox底部，文本的descender部分会超出这个位置，最终导致视觉上或控制台输出的y值不符合预期。

下面是几种解决方法：

• 强制底部对齐：用dominant-baseline属性
  设置dominant-baseline为text-bottom，这样<text>的y属性就会对应文本块的底部位置，直接满足你的需求：

  svg.plain("Hello Javascript")
     .fill("blue")
     .y(height)
     .attr("dominant-baseline", "text-bottom");
  

• 动态调整：通过边界框计算位置
  先获取文本的实际边界框，再根据框的高度调整y值，让文本底部刚好卡在y=100的位置：

  const text = svg.plain("Hello Javascript").fill("blue");
  const bbox = text.node.getBBox();
  text.y(height - bbox.height);
  

• 手动补偿：用dy属性调整偏移
  通过dy属性补偿字体descender的高度，数值可以根据实际字体调整，比如用相对单位em：

  svg.plain("Hello Javascript")
     .fill("blue")
     .y(height)
     .dy("1em");
  

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