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

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

Danny &#39;365CSI&#39; Engelman · Accepted Answer

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

Find centre of svg path elements

Answers (1)

Related Questions