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

问题描述

我想了解为什么默认情况下我的 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('你好词')//.attr('x', 0)//.attr('y', 0).attr('填充', '红色');

HTML:

文本元素在那里，充满红色且可见，但在屏幕的上/左角溢出.为什么 SVG 元素默认不定位到顶部/左侧 0px 0px ?

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

解决方案

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

基线是大多数字符的底点，但有些像 g、y、p 等在它下面.Hello world 没有带降序的字符，所以你根本看不到它.

CSS 属性可以改变这一点，例如对齐方式-基线和显性基线.请注意，并非所有 UA 都支持所有属性.

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/

解决方案

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.

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