How to make svg path element scale up and down from the elements unknown center point?

Question

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 I want it to scale from the center of each element. So far I have used .getBBox() to get the boundaries of the element and to get the center point from the beige path element called godwardSqare_obj . I have tried in the function selected_colour to make it so its scales up from the center but it doesn't work; its scales up but not from the center of the element.

When I inspect element on a browser, I can see that the translations and transformation are being applied to the element but only the transformation scale is working.

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

 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('translate', '(cx/2, cy/2)'); target.setAttribute('translate','(0-cx,0-cy)'); 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'); var godWard_Rect = godwardSquare_obj.getBBox(); godwardSquare_obj.setAttribute('x', godWard_Rect.x); godwardSquare_obj.setAttribute('y', godWard_Rect.y); godwardSquare_obj.setAttribute('width', godWard_Rect.width); godwardSquare_obj.setAttribute('height', godWard_Rect.height); godwardSquare_obj.setAttribute('cx', (godWard_Rect.x+0.5*godWard_Rect.width)); godwardSquare_obj.setAttribute('cy', (godWard_Rect.y+0.5*godWard_Rect.height)); 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>

Answer 1

1. you actually need to calculate cx and cy in selected_colour at the moment you're just using strings
2. you'd need to convert from the cx and cy strings to the values of those variables
3. there's no such attribute as translate and even if there were the translates would overwrite.
4. you need to set all the transforms in a single step

 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 let rect = target.getBBox(); let cx = rect.x + rect.width / 2; let cy = rect.y + rect.height / 2; target.setAttribute('transform', `translate(${cx}, ${cy}) scale(1.25) translate(${-cx},${-cy})`) } // 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'); var godWard_Rect = godwardSquare_obj.getBBox(); godwardSquare_obj.setAttribute('x', godWard_Rect.x); godwardSquare_obj.setAttribute('y', godWard_Rect.y); godwardSquare_obj.setAttribute('width', godWard_Rect.width); godwardSquare_obj.setAttribute('height', godWard_Rect.height); godwardSquare_obj.setAttribute('cx', (godWard_Rect.x+0.5*godWard_Rect.width)); godwardSquare_obj.setAttribute('cy', (godWard_Rect.y+0.5*godWard_Rect.height)); 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>