为什么SVG中设置相同y属性的text与rect元素显示位置不同

JavaScript代码的最终运行效果如下：

JavaScript代码如下：

tempArr.forEach(function (object, index) {
    barY += 15;
    object.color = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, .5)`;

    d3.select('#chart')
        .append('g')
        .attr('class', 'bar');

    d3.select(`#chart g:nth-child(${index+1})`)
        .append('rect')
        .attr('width', `${object['Population'] / 10000000 * 5}`)
        .attr('height', '15')
        .attr('x', '0')
        .attr('y', `${barY}`)
        .style('fill', `${object.color}`)

    d3.select(`#chart g:nth-child(${index+1})`)
        .append('text')
        .text(`${object.Country}, ${object.Population}`)
        .attr('x', `${object['Population'] / 10000000 * 5}`)
        .attr('y', `${barY}`)
        .style('font-size', '10');
})

我在g标签中分别插入了rect与text标签。可以看到我通过attr方法为rect和text标签设置了完全相同的y属性值，截图中也能验证二者的配置值完全一致，但实际视觉渲染的效果却和代码预期的结果不一致。

问题原因 #

两种元素的y属性定位参照基准完全不同，这是导致错位的核心：

• rect的y属性定义的是矩形顶边的坐标值，设置height:15后，矩形会从这个顶边位置向下延伸15个单位。
• text的默认定位规则下，y属性定义的是文本排版基线的坐标值，既不是文本顶边，也不是文本中心线。常规西文字体的基线距离文本顶部的距离约为字体大小的80%，和矩形顶边做参照自然会出现竖直方向的错位。

解决方案 #

不需要手动计算偏移值，只要调整text的对齐规则即可实现精准对齐：

• 给text元素添加dominant-baseline="middle"属性，把原本以基线为参照的定位逻辑，修改为以文本块的垂直中心线为定位基准
• 把text的y值设置为矩形垂直中心线的坐标，也就是当前代码里barY + 矩形高度/2，对应这里的barY + 7.5

修改后的text元素配置示例：

d3.select(`#chart g:nth-child(${index+1})`)
    .append('text')
    .text(`${object.Country}, ${object.Population}`)
    .attr('x', `${object['Population'] / 10000000 * 5}`)
    .attr('y', `${barY + 7.5}`)
    .attr('dominant-baseline', 'middle')
    .style('font-size', '10');

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