JSFiddle - React, Tailwind, and code Playground

by samizdam

HTML

<svg width="250" height="250" id="canvas">
    <circle cx="25" cy="25" r="10" fill="green" stroke="blue" stroke-width="2" id="blue"/>
    <circle cx="125" cy="125" r="10" fill="green" stroke="red"  stroke-width="2" id="red"/>
</svg>

JavaScript

/**
* methods
*/
var getCX = function(element){
    element = element || this;
    switch(element.tagName){
        case 'circle': return parseInt(element.getAttribute('cx'));
    }
}

var getCY = function (element){
    element = element || this;
    switch(element.tagName){
        case 'circle': return parseInt(element.getAttribute('cy'));
    }    
}
    
var move = function(e){
    console.log(e.type);
}

function initElement(selector, index){
    index = index || 0;
    element = $(selector).get(index);
    element.move = move;
    element.getCX = getCX;
    element.getCY = getCY;
    return element;
}

red = initElement('svg circle#red');
blue = initElement('svg circle#blue');

blue.addEventListener('click', move, false);