JSFiddle - React, Tailwind, and code Playground

by maxzeroedge

HTML

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <g id="group_text_1">
        <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
        <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text>
    </g>
    <!-- BBox in green -->
    <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"></rect>
    <!-- BoundingClientRect in red -->
    <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
</svg>

JavaScript

var rectBBox = document.querySelector('#rect_1');
var rectBoundingClientRect = document.querySelector('#rect_2');
var groupElement = document.querySelector('#group_text_1');

var bboxGroup = groupElement.getBBox();
rectBBox.setAttribute('x', bboxGroup.x)
rectBBox.setAttribute('y', bboxGroup.y)
rectBBox.setAttribute('width', bboxGroup.width)
rectBBox.setAttribute('height', bboxGroup.height)

var boundingClientRectGroup = groupElement.getBoundingClientRect();
rectBoundingClientRect.setAttribute('x', boundingClientRectGroup.x)
rectBoundingClientRect.setAttribute('y', boundingClientRectGroup.y)
rectBoundingClientRect.setAttribute('width', boundingClientRectGroup.width)
rectBoundingClientRect.setAttribute('height', boundingClientRectGroup.height)