d3.js中的默认SVG位置

我想了解为什么我的SVG位于SVG容器元素之外，而不是默认的x:0/y0坐标

CSS: 最小值（无CSS，仅删除文档正文上的边距/填充）

Javascript:

var svg = d3.select('div#map').append('svg:svg');
svg.append('svg:g')
    .append('svg:text')
    .text('Hello word')
    //.attr('x', 0)
    //.attr('y', 0)
    .attr('fill', 'red');

<div class="map" id="map"></div>

HTML:

var svg = d3.select('div#map').append('svg:svg');
svg.append('svg:g')
    .append('svg:text')
    .text('Hello word')
    //.attr('x', 0)
    //.attr('y', 0)
    .attr('fill', 'red');

<div class="map" id="map"></div>

文本元素在那里，用红色填充，可见，但在屏幕的左上角溢出。为什么SVG元素在默认情况下没有定位到顶部/左侧0px 0px

---

演示：

文本元素的原点是从左到右文本的文本基线处的左手边

基线是大多数字符的底点，但有些字符如g、y、p等会下降到它下面。Hello world没有带后代的字符，所以您根本看不到它

---

有一些方法可以改变这一点，例如路线基线和主导基线。但要小心，并非所有的UAs都支持所有属性。

谢谢，SVG中的形状也一样吗？不完全一样，形状没有基线。一些，比如

甚至没有x，y属性。