JSFiddle - React, Tailwind, and code Playground

by Terry Young

HTML

<link rel="stylesheet" href="http://keith-wood.name/css/jquery.svg.css">
<script src="http://keith-wood.name/js/jquery.svg.js"></script>
<div id="svgexample" class="svgdiv" style="width: 100%; height: 300px;"></div>

CSS

.svgdiv { 
    border: 1px solid #3c8243; 
}

JavaScript

var svg;

(function(A) {
    A.fn.hasEvent = function(C) {
       var B = this.data("events");
       return( B && B[C] )
    }
})(jQuery);


(function($) {
    $.fn.sendToTop = function () {
        var elem = this.get(0);

        // move element "on top of" all others within the same grouping
        // elem.parentNode.appendChild(elem);

        // move element "on top of" all others in the entire document
        elem.ownerSVGElement.appendChild(elem);

        return this;
    };

    $.fn.sendToBottom = function () {
        var elem = this.get(0);

        // move element "underneath" all others within the same grouping
        //elem.parentNode.insertBefore(elem,elem.parentNode.firstChild);

        // move element "underneath" all others in the entire document
        elem.ownerSVGElement.appendChild(elem,elem.ownerSVGElement.firstChild);

        return this;
    };

    $.fn.refreshConnectors = function () {
        var connections = this.data('connections');

        for (var i = 0, j = connections.length; i < j; i++) {
            var $connector = $(connections[i]),
                $a = $connector.data('a'),
                $b = $connector.data('b'),
                axy = getXY($a),
                bxy = getXY($b);

            console.info($connector.data('line-type'));

            $connector.attr({
                x1: axy.x,
                y1: axy.y,
                x2: bxy.x,
                y2: bxy.y
            });
        };

        return this;
    };

})(jQuery);




/* Only works on the red box!*/
var getXY = function($elem) {
    //console.info($elem);
    var szType = svgType($elem);

    if (szType  == 'circle') {
        var x = Number($elem.attr('cx')),
            y = Number($elem.attr('cy')),
            w = Number($elem.attr('r')) * 2,
            h =  Number($elem.attr('r')) * 2;
        return {x:x, y:y};
    } else if (szType == 'rect') {
        var x = Number($elem.attr('x')),
            y = Number($elem.attr('y')),
       ...