JSFiddle - React, Tailwind, and code Playground

by realhunts

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

</div>

CSS

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

JavaScript

var svg = $("#svg-container");

svg.load("https://rawcdn.githack.com/liabru/matter-js/master/demo/svg/terrain.svg", function(data) {
  svg.children().find("path").click(function(e) {
 //   $("#Layer_1 path").removeAttr("style");
    $this = $(this);
    var bbox = this.getBBox();
    var centreX = bbox.x + bbox.width/2;
    var centreY = bbox.y + bbox.height/2;
    $this.css("transform-origin", centreX + 'px ' + centreY + 'px');
    $this.css("transform", "scale(2)");
    $this.css("stroke", "orange");
    $this.css("fill", "green");
  //  this.parentElement.appendChild(this);
  })
})