d3.js中的默认SVG位置 [英] Default SVG position in d3.js

问题描述

我想了解为什么我的SVG为什么在SVG容器元素的外部位置而不是默认在x:0/y0坐标处?

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:最小(如果没有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?

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 ?

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

推荐答案

文本元素的起源是文本基线处从左到右文本的左边缘.

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

基线是大多数字符的底点，但是某些字符(例如g，y，p等)却降至其底端.Hello world没有带有后代的字符，因此您根本看不到它.

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.

有 CSS属性可以更改此设置，例如对齐方式-基线和主要基线.请注意，尽管并非所有UA都支持所有属性.

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.

这篇关于d3.js中的默认SVG位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！