为什么svg中text和rect的y位置不同？答案

【问题标题】：why is the y position of text and rect different in svg?为什么svg中text和rect的y位置不同？
【发布时间】：2021-03-28 08:30:38
【问题描述】：

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');
    })

我将rect 和text 标签添加到g 标签中。你可以看到我使用attr 方法设置y 值rect 和text 标签。它们在屏幕截图中也是一样的。

但它在视觉上显示的与代码结果不同。

【问题讨论】：

这取决于你的基线设置是什么developer.mozilla.org/en-US/docs/Web/SVG/Attribute/…
为 j、q 和 y 等小写字母留出空间

标签： javascript svg d3.js

【解决方案1】：

文本对象中的y位置与所有其他对象不同。

所有其他对象，y是从上到下。但是对于 Text 对象，y=0 是字体设计的基线，y 值从下到上上升。

【讨论】：