По умолчанию положение SVG в d3.js

Question

Я хотел бы понять, почему мой SVG позиционировал вне элемент контейнера SVG, а не координаты x: 0/y0 по умолчанию?

CSS: Minimal (без 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 и т. Д., Опускаются ниже нее. Привет, мир не имеет персонажей с descenders, поэтому вы его вообще не видите.

Есть CSS properties, которые могут изменить это, например, выравнивание-базовое и доминирующее положение. Будьте осторожны, так как не все UA поддерживают все свойства.