JSFiddle - React, Tailwind, and code Playground

by gschutz

HTML

<svg id="SvgjsSvg1006" width="640" height="480" viewBox="0 0 640 480" x="0" y="0" style="overflow: visible;">
    <g id="master">
        <g id="SvgjsG1008" class="tool maca category-unclassified">
            <rect id="SvgjsRect1007" width="120" height="50" fill="#aa44cc" x="220" y="30"></rect>
        </g>
        <rect id="SvgjsRect1019" width="150" height="120" fill="#000000" x="100" y="100"></rect>
        <rect id="SvgjsRect1020" width="200" height="150" fill="#444444" x="350" y="200"></rect>
        <rect id="SvgjsRect1021" width="10" height="10" fill="#dddddd"></rect>
        <rect id="SvgjsRect1022" width="10" height="10" fill="#444444" x="10" y="10"></rect>
        <path id="SvgjsPath1023" d="M300 100H380V80 " stroke="#444444" stroke-width="0.5" fill="none"></path>
    </g>
</svg>

JavaScript

// create the svg
groupSvg = d3.select("#master");

// create the zoom listener
var zoomListener = d3.behavior.zoom()
  .scaleExtent([0.1, 3])
  .on("zoom", zoomHandler);

// function for handling zoom event
function zoomHandler() {
  groupSvg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  console.log(d3.event.translate, d3.event.scale);
  console.log(d3.event);
}


rootSvg = d3.select("#SvgjsSvg1006");
/*
  creating your svg image here
*/

// apply the zoom behavior to the svg image
zoomListener(rootSvg);