Question

我想了解为什么我的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');

HTML：

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

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

演示：http://jsfiddle.net/qt0k6tz1/1/

Answer 1

文本元素的原点是文本基线的左手边缘，用于从左到右文本。

基线是大多数角色的底线，但有些像g，y，p等低于它。 Hello world没有下降字符，所以你根本看不到它。

有CSS properties可以改变这种情况，例如对齐基线和显性基线。请注意，并非所有UA都支持所有属性。

d3.js中的默认SVG位置

1 个答案: