DeStijl: getBBox

by Julien Etienne

HTML

<span>hello world</span>
<svg width='500' height='500' viewBox='0 0 500 500'>
    <text x='200' y='200'>hello world</text>
    <text class='output' x='50' y='50'></text>
    <text class='output' x='50' y='65'></text>
    <text class='output' x='50' y='80'></text>
    <text class='output' x='50' y='95'></text>
</svg>

CSS

span{
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 1em;
    font-family: arial;
    letter-spacing: 0;
}

text {
    font-size: 30px;
    font-family: arial;
    line-height: 0;
    position: absolute;
}
.output {
    font-size: 16px;
}

JavaScript

var get = 'getElementsByTagName',
    svg = document[get]('svg')[0],
    span = document[get]('span')[0],
    subject = svg[get]('text')[0],
    outputHeight = svg[get]('text')[1],
    outputWidth = svg[get]('text')[2],
    outputX = svg[get]('text')[3],
    outputY = svg[get]('text')[4];

console.log(span.getBoundingClientRect())

var width = document.createTextNode(
    'width = ' + subject.getBBox().width);
var height = document.createTextNode(
    'height = ' + subject.getBBox().height);
var x = document.createTextNode(
    'x = ' + subject.getBBox().y);
var y = document.createTextNode(
    'y = ' + subject.getBBox().x);
outputHeight.appendChild(width);
outputWidth.appendChild(height);
outputX.appendChild(x);
outputY.appendChild(y);

output.textContent.appendChild(myContent);
console.log(
x.getBBox());