how to get center coordinates of rectangle in raphaeljs

Question

I tried to get from rect.cx and rect.cy from RaphaelJS.rect API. But I am getting undefined in the console.

I tried

var cx = rect.cx;
var cy = rect.cy;

and

console.info(rect.cx);
console.info(rect.cy);

all showing undefined.

how to get center coordinates from rectangle object.

Answer 1

The SVG rect element has neither a cx or cy, that is for circles. Also the code rect.x or rect.y would produce nothing anyways. You can always console.log() the element itself to see all of the available properties.

To get the center coords of a rect created with RaphaelJS you can do something like this:

var paper = Raphael("paper1", 500,500);
var rect1 = paper.rect(25,75,500,500).attr({fill: "orange"});
var x = rect1.attrs.x
var y = rect1.attrs.y
var w = rect1.attrs.width
var h = rect1.attrs.height

// find the coordinates of the midpoint
var midX = x + (w/2)
var midY = y + (h/2)

console.log(midX)
console.log(midY)

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<div id='paper1'></div>

If it were a regular SVG rect you could get these values using element.getAttribute("attribute-name")