JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1010px" height="750px" viewBox="0 0  1010 750" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable">
  <rect x="104" y="85" stroke="black" id="e1_rectangle" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" width="145" height="209" fill="red" />
  <text fill="black" x="346" y="147" id="e2_texte" style="font-family: Arial; font-size: 20px;" transform="matrix(1 0 0 1 -217 -80)">rectangle</text>
  <circle id="e5_circle" cx="407" cy="166" stroke="black" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" r="83.0963296422" fill="green" />
  <text fill="black" x="387" y="62" id="e6_texte" style="font-family: Arial; font-size: 20px;">circle</text>
</svg>

JavaScript

//filter all the texts
var texts = d3.selectAll("text")[0].filter(function(r) {
  return d3.select(r).text() == "rectangle"
})
//map all the x and y of filtered texts
var coordinates = texts.map(function(t){
	return {x: d3.select(t).attr("x"), y : d3.select(t).attr("y")}
})
console.log(coordinates)