JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<svg width="400" 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> 
    <!-- Shows BBox in green --> 
    <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect> 
    <!-- Shows BoundingClientRect in red --> 
    <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect> 
</svg>

CSS

*{margin:0}

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);