JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<svg id='s_v_g' xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox='0 0 10 10' style='border: 1px solid black;'>
  <rect fill='yellow' x="1" y="1" width="1" height="1" id='square'/>
  <rect fill='lightgreen' x="2" y="1" width="1" height="1" />
  <circle r='.5' cx='1' cy='1' fill='red' id='circle'/>
</svg>

JavaScript

var svg = document.getElementById('s_v_g');
var sq = document.getElementById('square');
var circle = document.getElementById('circle');
console.log(sq);
var r = svg.createSVGRect();
r.x = sq.getAttribute("x");
r.y = sq.getAttribute("y");
r.width = r.height = sq.getAttribute("width");

console.log(svg.getIntersectionList(r, null));