JSFiddle - React, Tailwind, and code Playground

HTML

<div id="svg-container"><!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1247.24px" height="1360.63px" viewBox="0 0 1247.24 1360.63" enable-background="new 0 0 1247.24 1360.63" xml:space="preserve">
<g>
	<defs>
		<rect id="SVGID_1_" width="1247.244" height="1360.63"></rect>
	</defs>
	<clipPath id="SVGID_2_">
		<use xlink:href="#SVGID_1_" overflow="visible"></use>
	</clipPath>
	<path clip-path="url(#SVGID_2_)" fill="#4B84C1" d="M168.175,1080.932c-1.247,0.001-2.211-0.089-2.947-0.272
		c-5.932-1.484-26.557-8.639-27.432-8.942c-0.076-0.026-0.149-0.058-0.219-0.097c-0.325-0.174-7.979-4.313-10.5-7.151
		c-0.211-0.237-0.432-0.491-0.663-0.757c-2.058-2.369-4.878-5.614-8.585-5.614c-0.243,0-0.49,0.015-0.743,0.042
		c-0.471,0.053-0.939,0.078-1.392,0.078c-4.869,0-8.37-3.1-8.828-7.661c-2.195-0.956-7.512-3.686-8.613-8.086
		c-0.991-3.961,0.041-7.19,0.66-8.629l-6.355-11.602c-0.947-0.964-4.955-5.171-5.861-8.194c-0.911-3.035-2.36-12.852-2.421-13.269
		c-0.071-0.481,0.096-0.967,0.447-1.303c0.234-0.224,5.78-5.474,10.828-5.474c0.156,0,0.309,0.005,0.461,0.015l0.721-6.966
		c0.025-0.242,0.109-0.474,0.244-0.678l0.824-1.236l-1.628-6.784c-0.114-0.476,0.011-0.978,0.335-1.344
		c0.287-0.323,0.697-0.506,1.124-0.506c0.056,0,0.112,0.003,0.169,0.01l12.233,1.394c2.453-3.015,11.557-13.569,18.759-13.569
		c7.41,0,30.363,6.379,32.089,6.862c2.279,0.41,19.222,3.688,22.967,11.181c3.326,6.653,5.834,17.088,6.285,19.032
		c1.624,2.252,14.041,19.388,18.671,23.077c1.312,0.604,6.647,3.651,3.918,12.143c-1.021,3.177-1.782,5.23-2.337,6.729
		c-0.885,2.387-1.152,3.107-1.152,4.683c0,0.641,0.028,1.69,0.063,2.981c0.127,4.735,0.338,12.661-0.39,16.304
		c-1.018,5.088-8.102,8.175-8.906,8.511c-0.081,0.033-0.165,0.06-0.25,0.079C198.834,1076.123,177.213,1080.932,168.175,1080.932"></path>
	<path...

CSS

#svg-container {
  width: 500px;
  height: 500px;
}
#svg-container svg {
  width: 100%;
  height: 100%;
}

JavaScript

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