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 element.getAttribute('cx');
    }
}

var getCY = function (element){
    element = element || this;
    switch(element.tagName){
        case 'circle': return element.getAttribute('cy');
    }    
}

var move = function(e){
    time = '2s';
    right = 15;
    bottom = 15;
    switch(this.tagName){
        case 'circle': {
            var animateCX = document.createElement('animate');
            animateCX.setAttribute('attributeType', 'XML');
            animateCX.setAttribute('attributeName', 'cx');
            animateCX.setAttribute('from', this.getCX());
            animateCX.setAttribute('to', this.getCX() + right);
            animateCX.setAttribute('begin', '0s');
            animateCX.setAttribute('dur', time);
            animateCX.setAttribute('fill', 'freeze');
            
            var animateCY = document.createElement('animate');
            animateCY.setAttribute('attributeType', 'XML');
            animateCY.setAttribute('attributeName', 'cy');
            animateCY.setAttribute('from', this.getCY());
            animateCY.setAttribute('to', this.getCY() + right);
            animateCY.setAttribute('begin', '0s');
            animateCY.setAttribute('dur', time);
            animateCY.setAttribute('fill', 'freeze');
            this.appendChild(animateCX);
            this.appendChild(animateCY);
        }; break;
    }
    

    
}

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