35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
const svg = document.querySelector('svg');
|
|
const gb = svg.querySelector('.gameboard');
|
|
const bg = svg.querySelector('#background');
|
|
const grid = gb.querySelector('.grid');
|
|
const dots = gb.querySelector('#dots');
|
|
const bbox = grid.getBBox();
|
|
|
|
setElAttrs(bg, bbox);
|
|
setElAttrs(dots, bbox)
|
|
svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb)));
|
|
|
|
function setElAttrs(el, attrs) {
|
|
for (const key in attrs) {
|
|
el.setAttributeNS(null, key, attrs[key]);
|
|
}
|
|
}
|
|
|
|
function formatForViewBox({ x, y, width, height }) {
|
|
return `${x} ${y} ${width} ${height}`;
|
|
}
|
|
|
|
function calcComputedBboxFor(el) {
|
|
const { x, y, width, height } = el.getBBox();
|
|
const originPt = new DOMPoint(x, y);
|
|
const maxPt = new DOMPoint(width + x, height + y);
|
|
|
|
const sequence = getComputedStyle(el).transform.match(/-?\d+\.?\d*/g);
|
|
const mtx = new DOMMatrix(sequence || '');
|
|
|
|
const { x: originPtX, y: originPtY } = originPt.matrixTransform(mtx);
|
|
const { x: maxPtX, y: maxPtY } = maxPt.matrixTransform(mtx);
|
|
|
|
return { x: originPtX, y: originPtY, width: maxPtX - originPtX, height: maxPtY - originPtY };
|
|
}
|