How to convert ViewBox svg to zero initial coordinates?

Admin 1
Viewed 88

I have the following svg with viewBox:

viewBox="16.350 -671.025 1150.675 852.600"

<svg xmlns="http://www.w3.org/2000/svg" viewBox="16.350 -671.025 1150.675 852.600" width="1150.675px" height="852.600px">
<circle cx="1006.275" cy="-420.45" r="5" fill="#000" class="pointer" id="controurcircle_1"></circle>
</svg>

As you can see viewBox contains initial users coordinates. If I change it to 0,0 as standard, how coordinates of circle should be changes?

let circleX = Math.abs(Math.abs(1006.275) + Math.abs(16.350));
let circleY = Math.abs(Math.abs(-420.45) - Math.abs(-671.025));

Right?

coordinates math svg javascript
1 Answers

I'm not sure why you have all the abs() calls in there.

You will need to subtract the viewBox minX and minY fields from all your (absolute) coordinates. Don't alter any relative coordinate pairs (lower case path commands) in any <path> elements you might have.

viewBox="0 0 1150.675 852.600"

let circleX = 1006.275 - 16.350;
let circleY = -420.45 - (-671.025);  // = -420.45 + 671.025
user_12928480
Related