Find centre of svg path elements

Question

Hello I am fairly new with svg and JavaScript and I am trying to make some svg elements popup (by scaling) when the mouse is over the svg and vice versa when the mouse is off the svg element.

I have been able to make the svg element increase in size by using transformation, but is there a way that they scale from their center's?

Here is my svg (I created it using this website svg-edit ):

 // event-driven mouse-interaction with SVG objects function unselected_colour(evt) { // get the element that triggered the browser event let target = evt.target; // modify the element target.setAttribute('transform', 'scale(1)') } function selected_colour(evt) { // get the element that triggered the browser event let target = evt.target; // modify the element target.setAttribute('transform', 'scale(1.25)') } // find the SVG rectangle in the DOM let mileEndRoad_obj = document.getElementById('mile_end_road'); let bandcroftRoad_obj = document.getElementById('bandcroft_road'); let godwardSquare_obj = document.getElementById('godward_sqaure'); let compSci_obj = document.getElementById('computer_science'); let itl_obj = document.getElementById('itl'); let engineering_obj = document.getElementById('engineering'); let peoplePalace_obj = document.getElementById('people_palace'); // pass the above functions as callbacks, to be triggered by mouse events godwardSquare_obj.addEventListener('mouseover', selected_colour, false); godwardSquare_obj.addEventListener('mouseout', unselected_colour, false); compSci_obj.addEventListener('mouseover', selected_colour, false); compSci_obj.addEventListener('mouseout', unselected_colour, false); itl_obj.addEventListener('mouseover', selected_colour, false); itl_obj.addEventListener('mouseout', unselected_colour, false); engineering_obj.addEventListener('mouseover', selected_colour, false); engineering_obj.addEventListener('mouseout', unselected_colour, false); peoplePalace_obj.addEventListener('mouseover', selected_colour, false); peoplePalace_obj.addEventListener('mouseout', unselected_colour, false);

 <svg width="1640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <:-- Created with SVG-edit - https.//github,com/SVG-Edit/svgedit--> <g class="layer"> <title>map</title> <path d="m38.86,66667l0.94l64,66666.0l0,00001.-28l8,66666,0l0.27.33333l35,33334.0l-11,33334.-20l-12,66666.0l-0,00001,-8c8.0 12,66667.0 12,66667,0c0.0 -0,66667.-65,33333 0.-65.33333c0,66667.0 -89,33333.0 -97,33333,0z" fill="rgb(94,43.126)" id="computer_science" stroke="#000000" stroke-width="5"/> <rect fill="#10a3a3" height="447.44527" id="bandcroft_road" stroke="#10a3a3" stroke-width="5" width="35.76642" x="308.90512" y="-24.52553"/> <rect fill="#10a3a3" height="54.74453" id="mile_end_road" stroke="#10a3a3" stroke-width="5" width="647.44528" x="-1.31387" y="425.10952"/> <path d="m239,41174.257.50001l-133,52938.-0.14706l-0,00001.-69.85294l50,7353.-0.00001l-16,17647.-31.61765l58,82353,0l0.30.14706l39,70588.0l0,44115.71,4706z" fill="#1bd1a6" id="godward_sqaure" stroke="#1bd1a6" stroke-width="5"/> <rect fill="rgb(94,43.126)" height="100.5" id="itl" stroke="#000000" stroke-width="5" width="65" x="37" y="192"/> <path d="m174,99947.274.5c-0,33149.41.16667 0,33149.82,83333 0.124l290,39161,0l0.-11.5l69,138332,0l0.-37l-68,641082,0l0.-142.5l-101,93541,0l0.167.5l-73,09515,0l0.-101l-115,8583.0,5z" fill="rgb(94,43.126)" id="engineering" stroke="#000000" stroke-width="5"/> <path d="m534,99996.206.029419l70,147082.-0,147072c0.0 0,441155.35.441191 -0,294139.34.705896c-0,735294.-0.735294 33,088235.0.000001 32,64708.-0.147072c-0,441155.-0.147073 0,441156.39,852955 0.39.705882c-0,441155.-0.147073 -18,676491.0.147074 -19,117647.0c-0,441156.-0.147073 0,441155.116,323546 0.116.176471c-0,441155.-0.147076 -82,647081.0.882369 -83,088235.0.735294c-0,441154.-0.147076 -0,294141.-191.764693 -0,294141.-191,029399z" fill="rgb(94,43,126)" id="people_palace" stroke="#000000" stroke-width="5"/> </g> </svg>

If any further explanation please let me know. Any help would be appreciated, thank you very much.

Answer 1

You can find the center with getBBox

• https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox

Then scale with a matrix

• how to use a svg matrix transform to scale only not to translate (implicite)?