如何使用javascript动态地将一个svg元素居中

Question

Given two svg elements that could be nested multiple times, have different transformations applied, and even be in different svg fragments , how would I move one (with javascript) so that it is centred on the other?

For the example below, I would like to move the red square so it is centred inside the blue square (without changing anything else about its shape).

Note: The javascript should be somewhat generic, so that it will still work after changing some of the transform attributes anywhere below

 var big_rect = document.getElementById('big_rect'); var small_rect = document.getElementById('small_rect'); var sm_box = small_rect.getBBox(); console.log(sm_box); // get center of rect in its coordinate system var pnt = big_rect.ownerSVGElement.createSVGPoint(); pnt.x = big_rect.x.baseVal.value + big_rect.width.baseVal.value/2; pnt.y = big_rect.y.baseVal.value + big_rect.height.baseVal.value/2; // following lines unrotate the smaller rect, // and don't center it on larger one anyway /* big_rect.parentNode.appendChild(small_rect); small_rect.setAttribute('transform','translate(' + (pnt.x - sm_box.width / 2) + ',' + (pnt.y - sm_box.height / 2) + ')' ); */ 

 <svg viewbox="50 50 250 250" height="250" width="250"> <g transform="translate(10,10) scale(2.5)"> <svg viewbox="0 0 500 500"> <g transform="translate(30,30) scale(0.5)"> <rect transform="translate(50,50)" id="big_rect" x=50 y=100 height=350 width=350 fill="blue" /> </g> </svg> </g> <g transform="scale(1.5) translate(15,15)"> <svg viewbox="0 0 300 300"> <g id="small_rect" transform="rotate(45)"> <rect x="150" y="0" width="20" height="20" fill="red" /> <g> </svg> </g> </svg> 

Answer 1

The issue is that your small_rect id is on the group element. you should target the rect element within the group.