JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
    <g id="control" transform="rotate(0, 128, 140)">
        <circle id="cylinder" r="115.26057" cy="140" cx="128" stroke-width="5" stroke="#000000" fill="#FF0000"/>
        <line id="indicator" x1="10" y1="140" x2="50" y2="140" stroke-width="5" stroke="#000000" fill="none"/>
    </g>
</svg>

JavaScript

var dial = document.getElementById('control');
var computed = window.getComputedStyle(dial)
console.log(dial, computed,
            computed.offsetTop, computed.offsetLeft, 
            computed.offsetHeight, computed.offsetWidth);
var transform = dial.getAttribute('transform');

//group.setAttribute('transform', 'rotate(45, 128, 140)');
var mouse_down = false;
var onMouseDown = function(event) {
    mouse_down = true;
    console.log(event.type, event.target.nodeName, 
                event.x, event.y, 
                event.offsetX, event.offsetY,
                event);
};
var onMouseMove = function(event) {
    if (!mouse_down) return;
    console.log(event.type, event.target.nodeName, 
                event.x, event.y, 
                event.offsetX, event.offsetY,
                event);
};
var onMouseUp = function(event) {
    mouse_down = false;
};
dial.addEventListener('mousedown', onMouseDown, false);
dial.addEventListener('mousemove', onMouseMove, false);
dial.addEventListener('mouseup', onMouseUp, false);