How to drag and drop the angular element using co-ordinates in Robot Framework - selenium

Question

I am trying to automate this angular application using the Robot Framework.
I am trying to drag and drop the rectangle using the drag and drop by offset keyword.
The manual scenario is when I click on the middle of the rectangle and drag, it drags the arrow.The code changes to <g transform="translate(0.5,0.5)" style="visibility: visible; cursor: pointer;"> .
If I drag through the edges, the rectangle will be moveable and the code changes to <g transform=" translate(0.5,0.5)" style=" visibility: visible; cursor: move;
I would like to drag and drop the rectangle by clicking sides. All the xpaths I tried are clicking in middle and dragging the arrow.
Please if anyone knows how to write xpath using SVG, please help me out.
<svg style="width: 100%; height: 100%; display: block; min-width: 1081px; min-height: 384px;">
<g>
<g></g>
<g>
<g transform="translate(0.5,0.5)" style="visibility: visible;">
<ellipse cx="132" cy="132" rx="32" ry="32" fill="black" stroke="black" transform="translate(0,3)" opacity="0.2"></ellipse>
<ellipse cx="132" cy="132" rx="32" ry="32" fill="#f5f5f5" stroke="#f5f5f5" pointer-events="all"></ellipse>
</g>
<g style="">
<g fill="#000000" font-family="Roboto" font-weight="bold" text-anchor="middle" font-size="14px">
<text x="132" y="137">New</text>
</g>
</g>
<g transform="translate(0.5,0.5)" style="visibility: visible; cursor: move;">
<rect x="960" y="300" width="120" height="80" fill="black" stroke="black" transform="translate(0,3)" opacity="0.2"></rect>
<rect x="960" y="300" width="120" height="80" fill="#2196f3" stroke="#2196f3" pointer-events="all"></rect>
</g>
<g style="cursor: move;">
<g fill="#000000" font-family="Roboto" font-weight="bold" text-anchor="middle" font-size="14px">
<text x="1020" y="345">test</text>
</g>
</g>
</g>
<g></g>
<g></g>
</g>
</svg>
I have tried many xpaths. But none of them helping me drag the rectangle. All the xpaths I tried are clicking in between the rectangle and results in an arrow.
Some of the xpaths tried:
(//[name()='svg']///)[3]
(//[local-name()='svg']//[name()='g'])[7]//*[local-name()='rect'][1]
(//[local-name()='svg']//[name()='g'])[7]//*[local-name()='rect'][2]
Thanks in advance.

Answer 1

The default Selenium behavior is to click on the center of the element.
For this I would use java.awt.Robot
In Java it would be something in the lines of
Robot r = new Robot();
Point p = findElement(locator).getLocation();
r.mouseMove(p.x + someXOffsetFromTheCenter, p.y + someYOffsetFromTheCenter);
//then use Actions to drag and drop to the destination (you should determine the destination the same way as the origin - [x,y])
Actions action = new Actions(driver);
action.click().moveByOffset(x,y).release().build().perform();
//alternatively, if you can drop to the center of the destination element, you could do
action.click().moveToElement(destinationElem).release().build().perform();