I recently encountered a scenario where I needed to position SVG shapes in the center of each other with varying scales. For instance, placing a rectangle or triangle within the center of a circle.
While I found some solutions that worked for shapes like rectangles which have x and y attributes, I faced a challenge when dealing with shapes like triangles that lack these attributes. Here's an example where I positioned a rectangle inside a circle: demo
var circle =document.getElementById('c1');
var rect = document.getElementById('r1');
var group = document.getElementById('g1');
var BBox = rect.getBBox();
rect.setAttribute('x',-(BBox.width/2));
rect.setAttribute('y',-(BBox.height/2));
rect.setAttribute('transform','scale(2)');
circle.setAttribute('transform','scale(1)');
group.setAttribute('transform','translate(200,150)');
However, when attempting to apply similar logic to a triangle by setting bounding box attributes as seen in this demo, it did not yield the desired result.
My query is whether there exists a method to set bounding box attributes for shapes without x and y values, or if there is an alternative approach to precisely position a shape within another shape?
Thank you.