title: Find centre of svg path elements
body: <p>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.</p>
  <p>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?</p>
  <p>Here is my svg (I created it using this website <a href="https://svg-edit.github.io/svgedit/dist/editor/index.html" rel="nofollow noreferrer">svg-edit</a>):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> // 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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;svg width="1640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"&gt;
          &lt;!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit--&gt;
          &lt;g class="layer"&gt;
           &lt;title&gt;map&lt;/title&gt;
           &lt;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"/&gt;
  
           &lt;rect fill="#10a3a3" height="447.44527" id="bandcroft_road" stroke="#10a3a3" stroke-width="5" width="35.76642" x="308.90512" y="-24.52553"/&gt;
           &lt;rect fill="#10a3a3" height="54.74453" id="mile_end_road" stroke="#10a3a3" stroke-width="5" width="647.44528" x="-1.31387" y="425.10952"/&gt;
  
           &lt;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"/&gt;
  
           &lt;rect fill="rgb(94,43,126)" height="100.5" id="itl" stroke="#000000" stroke-width="5" width="65" x="37" y="192"/&gt;
  
           &lt;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"/&gt;
  
           &lt;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"/&gt;
          &lt;/g&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If any further explanation please let me know.
  Any help would be appreciated, thank you very much.</p>