D3 Examples - getBBox() for different SVG elements with the same viewBox

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        width: 960px;
        height: 500px;
        position: relative;
        margin: 0;
        padding: 0;
    }
​
    .results-wrapper {
        position: absolute;
        bottom: 0;
        height: 190px;
        width: 960px;
        overflow: auto;
        border: 1px solid black;
        z-index: 20;
    }
​
    table {
        width: 100%;
        border-collapse: collapse;
        margin: -1px 0;
    }
​
    td, th {
        border: 1px solid black;
        padding: 2px 5px;
        text-align: center;
    }
​
    th {
        background-color: #d6d6d6;
    }
​
    svg {
        position: absolute;
        border: 1px solid red;
        background-color: #eeeeee;
        z-index: 1;
    }
​
    text {
        font-size: 20pt;
        color: black;
    }
​
</style>
<div class="svg-placeholder"></div>
<div class="results-wrapper">
    <table class="results">
        <tr>
            <th>SVG dimensions</th>
            <th>X</th>
            <th>Y</th>
            <th>Width</th>
            <th>Height</th>
        </tr>
    </table>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    var maxWidth = 960;
    var maxHeight = 300;
    var viewBox = '0 0 960 300';
    var textContent = 'Example Test';
​
    var N = 10;
    var data = [];
​
    for (var i = N; i > 1; i--) {
        data.push({
            width: maxWidth * i/N,
            height: maxHeight * i/N,
            x: maxWidth - i/N * maxWidth,
            y: maxHeight - i/N * maxHeight
        });
    }
​
    var placeholder = document.querySelector('.svg-placeholder');
    var results = document.querySelector('.results');
​
    data.forEach(function (item, i) {
        var svg = document.createElementNS('https://www.w3.org/2000/svg', 'svg');
        var text = document.createElementNS('https://www.w3.org/2000/svg', 'text');
​
        svg.setAttribute('width', item.width);
        svg.setAttribute('height', item.height);
        svg.setAttribute('viewBox', viewBox);
        svg.style.left = item.x + 'px';
        svg.style.top = item.y + 'px';
​
        text.textContent = textContent;
        text.setAttribute('x', 10);
        text.setAttribute('y', 30);
​
        svg.appendChild(text);
        document.body.appendChild(svg);
​
        item.text = text;
    });
​
    data
        .map(function (item) {
            var bbox = item.text.getBBox();
​
            return [
                item.width + 'x' + item.height,
                bbox.x,
                bbox.y,
                bbox.width,
                bbox.height
            ];
        })
        .map(function (item) {
            return item.map(function (cell) {
                var td = document.createElement('td');
​
                td.textContent = cell;
​
                return td;
            });
        })
        .forEach(function (rows) {
            var tr = document.createElement('tr');
​
            rows.forEach(function (td) {
                tr.appendChild(td);
            });
​
            results.appendChild(tr);
        });
</script>
    