Develop Reference

Set center point for svg group with javascript

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

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)

Get length of longest line segment in svg unsig javascript

I want to find a way to get the length of the longest line segment in a svg path. Since a path can jump from one point to another the getTotalLength() command doesn't work. As a simple example look at the following path:
<path d="
M 0 0 L 100 0
M 0 10 L 50 10
M 0 20 L 150 20
">
While getTotalLength() outputs 300, I want 150 as my output.
Is there a way to accomplish this?

I found a way to solve the problem. It works by splitting the path in multiple segments and measuring the seperately:
function maxSectionLength(path){
let segments = path.attributes.d.value.split(/(?=[m,M])/),
testPath = document.createElementNS('http://www.w3.org/2000/svg',"path"),
max = 0;
for(let d of segments){
testPath.setAttributeNS(null, "d", d)
max = Math.max(max,testPath.getTotalLength());
}
return max;
}

You may use this function to calculate the distance between 2 points:
function dist(x1,y1, x2,y2) {
let dx = x2 - x1;
let dy = y2 - y1;
return Math.sqrt(dx * dx + dy * dy);
}
In your case the last line begins at x1=0; y1=20 and ends at x2=150; y2=20
Of course you may also need a way to split the d attribute and extract the values for x1,y1,x2,y2.
I hope this helps.

For-loop not working for JavaScript animation

I am trying to write a for-loop to repeat the animation of the 'explode' path when a shape button is clicked but the for loop isn't working/executing and I can't see where its gone wrong. Aim of the for loop: loop the process of animating the path and then reversing the animation back to its original path. I know that the problem is somewhere in the for loop as the explode.animate() method just before the loop works.
Note: I am using Raphael.js for this animation
var explode = paper.path("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z");
explode.attr({'fill':"yellow", 'stroke-width':"4"});
explode.hide();
function explode1() {
explode.animate({path:("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z"), 'fill':"yellow"}, 100, 'ease-out');
}
function explode2() {
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
}
bomb1.click(function() {
audio.pause();
audio.currentTime = 0;
bomb1.remove();
explode.show();
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
for(var i = 0; i < 4; i+=1) {
if (i % 2 == 0) {
explode1();
} else {
explode2();
}
}
});
I have also tried putting the animate methods directly into the for loop instead of writing them as functions and for loop still doesn't work.
bomb1.click(function() {
audio.pause();
audio.currentTime = 0;
bomb1.remove();
explode.show();
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
for(var i = 0; i < 5; i+=1) {
if (i % 2 == 0) {
explode.animate({path:("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z"), 'fill':"yellow"}, 100, 'ease-out');
} else {
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
}
};

The animation is not synchronous. By that I mean the the for loop will not wait for the animation to finish before performing the next step of the loop. They will all get started at the same time.
What you need to do is trigger the next animation once the first one is complete. RaphaelJS lets you pass a function to the animate() method that gets called when the animation is finished.
See the following question for an example:
animating paths with raphael

Slow SVG rendering when setting src

I am having a problem when rendering SVG images to canvas. When I generate the svg markup and add it to the src of a new image then render that image to the canvas I get terrible performance. My app drops from real time to unusable. But if I save the same markup as an svg file and load that as an image it runs perfectly.
var svgText = `<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="239" height="268" id="testSVG" >
<defs>
<linearGradient id='grad2262398' x1='0' y1='0' x2='0' y2='1'>
<stop offset='0.0' stop-color='#bcbbbb'/>
<stop offset='1.0' stop-color='#d2a796'/>
</linearGradient>
</defs>
<path d="M 158.5 9.0 L 225.0 97.5 L 208.5 111.0 L 141.0 23.5 L 158.5 9.0 M 118.5 44.0 L 203.0 114.5 L 189.5 132.0 L 104.0 61.5 L 118.5 44.0 M 85.5 90.0 L 185.5 136.0 L 178.0 155.5 L 76.5 111.0 L 85.5 90.0 M 67.5 141.0 L 174.5 163.0 L 171.0 185.0 L 62.5 163.0 L 67.5 141.0 M 16.0 168.0 L 38.0 168.0 L 38.0 234.0 L 192.0 234.0 L 192.0 168.0 L 215.0 168.0 L 215.0 256.0 L 16.0 256.0 L 16.0 168.0 M 60.0 190.0 L 171.0 190.0 L 171.0 213.0 L 60.0 213.0 L 60.0 190.0 " style="fill:url(#grad2262398);"/>
</svg>`
var image = new Image();
image.src = svgText; // this runs very slowly
//while
var image = new Image();
image.src = "svgText.svg"; // this renders as fast as a simillar sized bitmap image
// yet the content is exactly the same.
Above is just an example of how the SVG is formated, the problem does not become an issue until the points in the path get to the several thousand. I can render a SVG with 100K+ points in real-time when loaded from a file, as a Javascript string I get less then 2 frames a second.
How can I fix this and still have the auto generated path content available so I can modify it when needed.

RaphaelJS HTML5 Library pathIntersection() bug or alternative optimisation (screenshots)

I have a chart generated using RaphaelJS library. It is just on long path:
M 50 122 L 63.230769230769226 130 L 76.46153846153845 130 L
89.6923076923077 128 L 102.92307692307692 56 L 116.15384615384615 106 L 129.3846153846154 88 L 142.6153846153846 114 L 155.84615384615384 52
L 169.07692307692307 30 L 182.3076923076923 62 L 195.53846153846152
130 L 208.76923076923077 74 L 222 130 L 235.23076923076923 66 L
248.46153846153845 102 L 261.6923076923077 32 L 274.9230769230769 130 L 288.15384615384613 130 L 301.38461538461536 32 L 314.6153846153846
86 L 327.8461538461538 130 L 341.07692307692304 70 L
354.30769230769226 130 L 367.53846153846155 102 L 380.7692307692308 120 L 394 112 L 407.2307692307692 68 L 420.46153846153845 48 L
433.6923076923077 92 L 446.9230769230769 128 L 460.15384615384613 110 L 473.38461538461536 78 L 486.6153846153846 130 L 499.8461538461538 56
L 513.0769230769231 116 L 526.3076923076923 80 L 539.5384615384614 58
L 552.7692307692307 40 L 566 130 L 579.2307692307692 94 L
592.4615384615385 64 L 605.6923076923076 122 L 618.9230769230769 98 L 632.1538461538461 120 L 645.3846153846154 70 L 658.6153846153845 82 L 671.8461538461538 76 L 685.0769230769231 124 L 698.3076923076923 110 L 711.5384615384615 94 L 724.7692307692307 130 L 738 130 L 751.2307692307692 66 L 764.4615384615385 118 L 777.6923076923076 70 L 790.9230769230769 130 L 804.1538461538461 44 L 817.3846153846154 130 L 830.6153846153845 36 L 843.8461538461538 92 L 857.076923076923 130 L 870.3076923076923 76 L 883.5384615384614 130 L 896.7692307692307 60 L 910 88
Also below these chart I have a jqueryUI slider of the same width (860px) and centered with the chart. I want when I move the slider to move a dot on the chart accordingly with the slider position. See attached screenshot:
As you can see it seems to work fine. I've implemented this behaviour using the pathIntersection() method. On the slide event at each ui.value (x coordinate) I intersect my chartPath (the one from above) with a vertical straight line at the x coordinate.
But still there are some problems. One of them is that it runs very hard, and it kinda freezes sometimes.. and very weird sometimes it doesn't seem to intersect at all even it should.. I'll example below 2 cases I identified:
M 499.8461538461538 0 L 499.8461538461538 140
M 910 0 L 910 140
Could you please explain why this intersect behaviour happens (it should return a dot).. and the worst part it seems like it happens randomly.. if I use another chartdata.
Also if you can identify another (better) solution to syncronise the slider position with the dot on the chart.. would be perfect.
I thought about using Element.getPointAtLength(length), but I don't know how. I think I should save the pathSegments and for each to compute the start Length and the finish Length.

I think it would be better to use the source data to find the intersection point manually. Shouldn't be too hard as the points are already sorted by x.
Path intersection appears to fail when you check the intersection at one of the vertices, which can be considered a bug but is not really surprising, since the library was never intended for computation geometry in the first place.
By way of quick hack you could also try slightly modifying the x value when pathIntersection fails to produce a single value and checking again, e.g. try 499.8461538461538 + 0.0001 * (2 * Math.random() - 1) instead of just 499.8461538461538. You might need to try several times before you get a proper answer, but here it is unlikely. I believe the technique is generally known as perturbation.