JSFiddle - React, Tailwind, and code Playground

by MaxMarkson

HTML

<svg height="0px">
    <defs>
        <g id="img">
            <circle id="cir1" cx="10" cy="10" r="5" />
            <circle id="cir2" cx="30" cy="10" r="5" />
            <rect id="rect1" x="50" y="5" width="20" height="10" />
        </g>
    </defs>
</svg>
<div id="div1">
    <div id="div2" style="width:100px; height: 50px; border: 1px solid black">hey</div>
</div>Shapes
<svg id="svg1" height="20px">        <g id="img">
            <circle id="cir1" cx="10" cy="10" r="5" />
            <circle id="cir2" cx="30" cy="10" r="5" />
            <rect id="rect1" x="50" y="5" width="20" height="10" />
        </g>
</svg>
<svg id="svg2" height="20px">        <g id="img">
            <circle id="cir1" cx="10" cy="10" r="5" />
            <circle id="cir2" cx="30" cy="10" r="5" />
            <rect id="rect1" x="50" y="5" width="20" height="10" />
        </g>
</svg>
<svg id="svg3" height="20px">
    <use id="img3" xlink:href="#img" />
</svg>
<svg id="svg4" height="20px">
    <use id="cir5" xlink:href="#img" />
</svg>
<div id="text">Text:
    <br>
</div>

JavaScript

$("#svg1 #cir1").css("fill","red");
var children = document.getElementById('img').childNodes;
var text = document.getElementById('text');
text.innerHTML += children.length + '<br>';
for (var i = 0, ii = children.length; i < ii; i++) {
    text.innerHTML += children[i].nodeName + '<br>';
}

$("#div1 #div2").css("background", "green");
$("#cir5").css("fill", "blue");