Set center point for svg group with javascript

Question

In a game I am currently making you are in a map which is build from nodes and you are warping to different nodes when you click on them. My current map looks like that (created with two.js it's a svg group where each circle and line is svg path element, ex:

<path transform="matrix(1 0 0 1 553 120)" d="M 8 0 C 8 2.02 7.085 4.228 5.656 5.656 C 4.228 7.085 2.02 8 0 8 C -2.021 8 -4.229 7.085 -5.657 5.656 C -7.086 4.228 -8 2.02 -8 0 C -8 -2.021 -7.086 -4.229 -5.657 -5.657 C -4.229 -7.086 -2.021 -8 -0.001 -8 C 2.02 -8 4.228 -7.086 5.656 -5.657 C 7.085 -4.229 8 -2.021 8 0 Z " fill="#003251" stroke="#ebebeb" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" id="19"></path>

And the map looks like that:

The marked in red node is indicator for your current position on the zone/map. How can I re-position the svg group so the current player position to be always in the center of the container shifting the whole map to left/right/top/bottom and become like that:

Using the following function I am able to change x,y coordinates of the svg group:

function shiftMap(id_attr, offsetX, offsetY) {
    let elem = $(id_attr);
    if (elem) {
        let params = ' translate(' + offsetX + ',' + offsetY + ')';
        elem.attr('transform', params);
    }
}

I also have a function to detect current player position node coordinates, so I tried to do:

//where playerPosX = X of the current player node location (red mark)
//and playerPosY = Y of the current player node location (red mark)
shiftMap("svgMapID", playerPosX, playerPosY);

Unfortunately the position is not accurate and map shifts/moves everywhere, goes out of the container bounds, etc. Any help is much appreciated. Thank you!

Hint: It may be possible to do via twojs anchor point, but I am not sure how. More info here: https://two.js.org/#two-anchor

score 1 · Answer 1 · answered Mar 06 '19 at 15:45

You have to calculate bounding box of your svg-group and move the group, considering outer offsets of the group itself and inner offsets relative to your center node.

Let's say you want this new random node to be at center of your group, highlighted in red.

Then you calculate its X and Y related to the container. Let's say that X = 400, Y = 200.

Then you calculate the bounding box of all your map group related to the container.

In this example, Y1 is probably going to be 0, where X1 you have to find. Try using group.getBoundingClientRect(shallow), as described in Two.js docs. Let's say that 'X1 = 300', 'Y1 = 0'.

Having your container W(width) = 1000 and H(height) = 700, let's calculate your final coordinates:

finalX= (W/2) - (X + X1) = 500 - 700 =-200

finalY= (H/2) - (Y + Y1) = 350 - 200 =150

That means that you have to move your map group -200 by X (200 to the left) and 150 by Y (150 to the bottom)

Set center point for svg group with javascript

1 Answers1