CODEWITHSUNDEEP
javascriptjqueryd3.jssvg
Shubham Bansal
Shubham Bansal

Reputation: 391

How to find the coordinates of a text in an svg?

I have one svg which is haveing some shapes and some text. what i want is the coordinates and id of the specific text. like:

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

now if i want to know the x,y coordinates of text : "rectangle" how can i do the same?

Thanks

Upvotes: 1

Views: 241

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You can do it like this using (since its tagged) d3.

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

working code here

Upvotes: 2

Related Questions