title: Scale svg path with Javascript
body: <p>I have this <strong><a href="https://jsfiddle.net/y0f1vk1r/2/" rel="nofollow noreferrer">fiddle</a></strong>.</p>
  
  <p>When I click onto the path, I want to zoom it. But after the zoom, the clicked path lost his current position.</p>
  
  <p>Here my jQuery code:</p>
  
  <pre><code>var svg = $("#svg-container");
  
  svg.load("svg/fondcarte-collec_actuelle.svg", function(data) {
    svg.children().find("path").click(function(e) {
      $("#Layer_1 path").removeAttr("style");
      var x =  e.pageX - svg.width() - $(this).offset().left - this.getBoundingClientRect().width + svg.find("svg").offset().left + 250;
      var y = e.pageY - svg.height() - $(this).offset().top - this.getBoundingClientRect().height + svg.find("svg").offset().top + 250;
      console.log(this.x, this.y)
      $(this).css("transform", "translate(" + x + "px, " + y + "px) scale(1.3)");
      $(this).css("fill", "green");
    })
  })
  </code></pre>
  
  <ul>
  <li><strong>How can I zoom it without losing the current position?</strong></li>
  <li><strong>Could anyone give a website with svg tutorial and manipulation?</strong></li>
  </ul>
  
  <p>I want a result like the picture below:
  <a href="https://i.stack.imgur.com/u7tQm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u7tQm.jpg" alt="enter image description here"></a></p>
  
  <p>How can it be done?</p>
  
  <p><strong>Note:</strong> I asked it without plugin because I want to understand this zoom concept.</p>