CODEWITHSUNDEEP
svgd3.js
Romain Bruckert
Romain Bruckert

Reputation: 2610

Default SVG position in d3.js

I would like to understand why is my SVG positioned outside the SVG container element and not at the x:0/y0 coordinates by default ?

CSS: Minimal (no CSS in case, only removed margin/padding on document body)

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>

The text element is there, filled with red and visible but is overflowing on the top/left corner of the screen. Why are SVG element not positioned to top/left 0px 0px by default ?

Demo: http://jsfiddle.net/qt0k6tz1/1/

Upvotes: 1

Views: 459

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

The origin of a text element is the left hand edge at the text baseline for left to right text.

The baseline is the bottom point for most characters, some like g, y, p etc descend below it though. Hello world has no characters with descenders so you don't see it at all.

There are CSS properties that can change this such as alignment-baseline and dominant-baseline. Be careful as not all UAs support all properties though.

Upvotes: 3

Related Questions