JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.2.0/snap.svg-min.js"></script>
<svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="750px" viewBox="0 0 500 750" enable-background="new 0 0 500 750" xml:space="preserve">
          <rect id="rect" fill="#FFA500" width="500" height="750"/>
          <path id="true-index" fill="#A52A2A" d="M250,125C111.929,125,0,236.929,0,375c0,138.072,111.929,250,250,250
               c138.072,0,250-111.928,250-250C500,236.929,388.072,125,250,125z M250,134c3.592,0,6.5,2.908,6.5,6.5s-2.908,6.5-6.5,6.5
               s-6.5-2.908-6.5-6.5S246.408,134,250,134z M250,574.114c-109.967,0-199.114-89.146-199.114-199.114
               c0-109.967,89.147-199.114,199.114-199.114c109.969,0,199.114,89.147,199.114,199.114C449.114,484.968,359.969,574.114,250,574.114
               z"/>
          <g id="plot-group">
          	<path id="compass" fill="#68A192" d="M250,175.886c-109.967,0-199.114,89.147-199.114,199.114
          		c0,109.969,89.147,199.114,199.114,199.114c109.969,0,199.114-89.146,199.114-199.114C449.114,265.033,359.969,175.886,250,175.886
          		z M250,184c3.592,0,6.5,2.908,6.5,6.5s-2.908,6.5-6.5,6.5s-6.5-2.908-6.5-6.5S246.408,184,250,184z M250,525
          		c-82.843,0-150-67.157-150-150s67.157-150,150-150s150,67.157,150,150S332.843,525,250,525z"/>
          	<circle id="plot-area" fill="#FFFFFF" style="opacity:0" cx="250" cy="375" r="150"/>
          </g>

     </svg>

JavaScript

function dragTrueIndex( dx, dy, x, y, e ) {
 var tiTran = trueIndex.data('origTransform');
     var pgTran = plotGroup.data('origTransform'); 
     var dTran  = dot.data('origTransform');

 trueIndex.transform( tiTran + ( tiTran ? "T" : "t") + [0,dy] );
     plotGroup.transform( pgTran + ( pgTran ? "T" : "t") + [0,dy] );
     dot.transform( dTran + ( dTran ? 'T' : 't' ) + [0,dy] );

     yShift = dy;

}

function startTrueIndex( x, y, e ) {

     yShift = 0;

     trueIndex.data( 'origTransform', trueIndex.transform().local );
     plotGroup.data( 'origTransform', plotGroup.transform().local );
     dot.data( 'origTransform', dot.transform().local );

}

function stopTrueIndex(e ) {

     yStart += yShift;

}

function dragCompass( dx, dy, x, y, e ) {
		console.log( xStart, yStart, e.offsetX, e.offsetY, startAngle)
     var a       = Snap.angle( xStart, yStart, e.offsetX, e.offsetY ) - startAngle;
     
     var pgTran  = plotGroup.data( 'origTransform' );
     var dotTran = dot.data( 'origTransform' );
			console.log(dotTran + ( dotTran ? 'R' : 'r' ) + [a,xStart,yStart])
     plotGroup.transform( pgTran + 'R' + [a,xStart,yStart] );
     dot.transform( dotTran + ( dotTran ? 'R' : 'r' ) + [a,xStart,yStart] );

     lastAngle = a;

}

function startCompass( x, y, e ) {

     plotGroup.data( 'origTransform', plotGroup.transform().local );
     dot.data( 'origTransform', dot.transform().local );

     startAngle = Snap.angle( xStart, yStart, e.offsetX, e.offsetY );
     lastAngle  = angle;

}

function stopCompass() {

     angle = lastAngle;

}

function plotDot( e ) {

     var a    = Snap.angle( xStart, yStart, e.offsetX, e.offsetY );
     var r    = 'r' + [a, e.offsetX, e.offsetY];
     var attr = {
          opacity: 1,
          cx: e.offsetX,
          cy: e.offsetY
     };

     dot.attr( attr ).transform( r );

}

var s = Snap('#test');

plotGroup  = s.select('#plot-group');
trueIndex  = s.select('#true-index');
compass    = s.select("#compass");
plotArea  ...