barcicki/README.md

## README.md

      
    Raw
  

              README.md
            
          
    getBBox() results calculated for multiple SVG elements with same viewBox but with different width and height. Aspect remains the same.

  
## index.html
<!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('http://www.w3.org/2000/svg', 'svg');
        var text = document.createElementNS('http://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>
	<!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('http://www.w3.org/2000/svg', 'svg');
	var text = document.createElementNS('http://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>