Automatically scale an SVG to its parent - javascript

I'm trying to get an SVG to automatically scale down and fit vertically into its parent container.
The SVG is of a signature, and I want it to shrink vertically to fix into the div in question. Once this happens the width of the div will always be more than large enough to accommodate the rest of the svg.
The fiddle I have is here, and the markup is below.
http://jsfiddle.net/3v4e4/2/
Just messing with it, it looks like setting the viewBox equal to "0,0,1100,100" is about right, but I can't for the life of me generalize a rule for calculating that.
<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;">
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 1 80 c 0.11 -0.19 3.59 -7.64 6 -11 c 5.2 -7.24 11.51 -13.76 17 -21 c 1.92 -2.53 3 -5.62 5 -8 c 6.6 -7.87 14.55 -15.43 21 -23 c 0.93 -1.09 1.95 -4.23 2 -4 c 0.14 0.71 -0.63 9.58 0 14 c 0.66 4.6 2.28 9.6 4 14 c 1.22 3.11 3 6.5 5 9 c 1.79 2.23 4.59 4.25 7 6 c 1.17 0.85 2.68 1.83 4 2 c 3.55 0.44 8.37 0.86 12 0 c 7.09 -1.67 14.75 -6.24 22 -8 c 4.65 -1.13 15 -1 15 -1"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 21 52 c 0.12 -0.07 4.58 -3 7 -4 c 3.13 -1.29 6.72 -2.51 10 -3 c 3.14 -0.47 10 0 10 0"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 108 64 c -0.02 -0.75 -0.75 -28.06 -1 -43 c -0.09 -5.56 -0.26 -10.84 0 -16 c 0.07 -1.33 0.21 -3.74 1 -4 c 2.11 -0.7 7.51 -0.39 11 0 c 2.31 0.26 4.63 1.58 7 2 c 3.27 0.58 6.88 0.08 10 1 c 11.18 3.3 23.97 7.93 34 12 c 1.18 0.48 2.27 1.86 3 3 c 2.16 3.35 4.65 7.3 6 11 c 1.2 3.3 1.61 7.33 2 11 c 0.28 2.63 0.68 5.63 0 8 c -1.82 6.37 -4.98 13.73 -8 20 c -1.21 2.51 -2.98 5.17 -5 7 c -5.02 4.56 -11.2 9.21 -17 13 c -2.67 1.75 -5.93 3.14 -9 4 c -5.08 1.42 -10.52 2.26 -16 3 c -7.11 0.96 -13.85 1.58 -21 2 l -13 0"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 185 85 c 0.1 -0.26 4.17 -9.78 6 -15 c 2.97 -8.48 4.86 -16.77 8 -25 c 2.24 -5.89 5.71 -11.27 8 -17 c 1.01 -2.51 1.01 -6.02 2 -8 c 0.43 -0.86 2.4 -2.3 3 -2 c 1.31 0.65 3.69 3.81 5 6 c 3.61 6.01 7.11 12.56 10 19 c 1.4 3.13 2.26 6.59 3 10 c 0.93 4.3 0.84 8.79 2 13 c 3.16 11.44 11 34 11 34"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 247 78 c 0.04 -0.05 2 -2.16 2 -3 c 0 -1.04 -1.01 -3.46 -2 -4 c -2.03 -1.11 -6.17 -0.95 -9 -2 c -6.05 -2.24 -11.84 -5.89 -18 -8 c -6.45 -2.21 -13.17 -3.73 -20 -5 c -7.69 -1.43 -23 -3 -23 -3"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 280 87 c 0.04 -0.32 1.03 -11.97 2 -18 c 0.72 -4.44 2.28 -8.54 3 -13 c 1.31 -8.08 1.67 -16.57 3 -24 c 0.25 -1.37 1.71 -2.7 2 -4 c 0.32 -1.46 -0.11 -5.14 0 -5 c 0.2 0.27 2.38 6.09 3 9 c 0.33 1.54 -0.35 3.42 0 5 c 3.87 17.56 11.56 49.11 13 54 c 0.09 0.32 1.93 -1.97 2 -3 c 0.8 -11.75 -0.18 -27.39 1 -41 c 0.82 -9.44 3.67 -24.16 5 -28 c 0.21 -0.6 3.43 0.92 4 2 c 4.46 8.42 9.16 21.76 14 32 c 0.69 1.47 2.39 2.63 3 4 c 0.62 1.4 0.27 3.58 1 5 c 4.32 8.37 10.8 17.06 15 26 c 3.4 7.25 8 23 8 23"/></svg>
</div>

For scaling of an svg to work, you absolutely have to supply a viewBox which matches the bounding box of the contained elements. In your case that would be something like viewBox="0 0 360 100".
The bounding box can be calculated via javascript, but as I have read the getBBox() method is buggy in some cases. I can't comment further on that, but in this case and on chrome it works, see: http://jsfiddle.net/3v4e4/7/
Note that both getBBox() and setAttribute() are native methods and for setting the viewBox you absolutely have to use these. Using the jquery ´.attr()` method will not work as the SVG DOM is different from the HTML DOM which jquery is designed for: http://keith-wood.name/svg.html#dom

If you're using a modern browser, you might be able to just use your SVG as the src for an IMG and set the height to 100%.
Example: http://jsfiddle.net/kj7Wh/
<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;">
<img src="http://openclipart.org/people/StefanvonHalenbach/StefanvonHalenbach_Battle_axe_medieval.svg" height="100%" />
</div>

might not work everywhere, but the zoom command on the svg element
svg{zoom:32%;}
or, you can save the this as an svg file and edit this inside illustrator

Related

Update svg style after php bdd request

I am trying to do an dynamic map of a building, when a user enter the name of the person and the bdd will give me back his desk number, which is an ID in my svg paths but odk what i am doing wrong,
I am also trying to trigger a js method each time a user press a desk on the map it'll return all information about the person using the desk.
here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="app.css">
</head>
<body>
<form action = "validate.php" method = "post">
<input type = "search" name = "nom">
<button type= "submit" id='valider'>Recherche</button>
</form>
<div class="map" id="map">
<div class="map__image">
<svg version="1.0" class="tempo" xmlns="http://www.w3.org/2000/svg"
width="1528.000000pt" height="502.000000pt" viewBox="0 0 1528.000000
502.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,502.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M130 2710 l0 -2220 5935 0 5935 0 1477 1001 c813 551 1532 1039 1599 1084 l120 81 -990 344 c-1258 436 -1538 533 -3231 1122 l-1390 483 -240 5 -240 5 -390 158 -389 157 -4098 0 -4098 0 0 -2220z m8575 2050 l370 -149 -725 -1 c-399 0 -2090 5 -3758 11 -1668 6 -3034 10 -3036 8 -3 -3 -13 -575 -16 -851 l0 -48 -700 0 -699 0 -1 590 0 590 4097 0 4098 -1 370 -149z m-6729 -150 l123 0 3 -52 3 -53 38 -3 37 -3 0 -290 c0 -186 4 -289 10 -289 6 0 10 107 10 300 l0 300 -40 0 c-34 0 -41 4 -46 24 -3 14 -4 33 -2 43 3 17 21 18 286 21 l282 2 0 -450 0 -450 158 2 157 2 -147 3 -148 4 0 444 0 445 265 0 265 0 0 -535 0 -535 135 0 c83 0 135 4 135 10 0 6 -48 10 -125 10 l-125 0 0 525 0 525 245 0 245 0 0 -520 0 -520 283 2 282 3 -277 2 -277 3 0 503 c-1 276 3 508 7 515 7 9 86 12 363 10 l354 -3 5 -530 c3 -291 7 -528 10 -525 2 3 6 241 9 530 l6 525 63 0 c34 -1 627 -2 1317 -3 l1255 -2 0 -530 0 -530 170 0 c107 0 170 4 170 10 0 6 -60 10 -160 10 l-160 0 0 320 0 320 160 0 160 0 0 85 0 85 -160 0 -160 0 0 115 0 115 93 0 c50 0 163 -3 250 -7 l157 -6 0 -519 c0 -339 3 -518 10 -518 7 0 10 180 10 520 l0 520 525 0 525 0 2 -522 2 -523 7 375 c3 206 7 441 8 523 l1 147 404 0 c342 0 405 -2 409 -14 8 -19 8 -983 0 -1002 -4 -12 -55 -14 -324 -14 -206 0 -319 -4 -319 -10 0 -6 117 -10 330 -10 l330 0 0 520 c0 304 4 520 9 520 11 0 4327 -1496 4341 -1505 6 -4 9 -229 9 -628 l0 -622 -22 -16 c-12 -8 -265 -180 -562 -381 -297 -201 -723 -489 -948 -641 l-407 -277 -565 0 -565 0 0 640 0 640 -165 0 c-103 0 -165 -4 -165 -10 0 -6 58 -10 155 -10 l155 0 0 -420 0 -420 -155 0 -155 0 0 -82 0 -83 155 3 155 3 0 -131 0 -130 -255 0 -255 0 0 642 c0 353 -2 639 -5 636 -3 -3 -7 -291 -8 -639 l-2 -634 -1850 0 -1850 0 -2 270 c-2 149 -3 404 -3 568 l0 297 -167 -2 -168 -2 163 -3 162 -3 0 -350 0 -350 -160 0 -160 0 0 -90 0 -90 160 0 160 0 0 -125 0 -125 -255 0 -255 0 0 640 c0 420 -3 640 -10 640 -7 0 -10 -220 -10 -640 l0 -640 -260 0 -260 0 0 120 0 120 180 0 180 0 0 90 0 90 -180 0 -180 0 0 425 0 425 165 0 c103 0 165 4 165 10 0 6 -63 10 -170 10 l-170 0 0 -645 0 -645 -1050 0 -1050 0 0 645 0 645 -170 0 c-107 0 -170 -4 -170 -10 0 -6 62 -10 165 -10 l165 0 0 -425 0 -425 -170 0 -170 0 0 -85 0 -85 170 0 170 0 0 -125 0 -125 -265 0 -265 0 2 645 3 645 -177 0 c-112 0 -178 -4 -178 -10 0 -6 64 -10 172 -10 l171 0 -6 -292 c-4 -161 -7 -353 -7 -425 l0 -133 -160 0 -160 0 0 -85 0 -85 160 0 160 0 0 -125 0 -125 -250 0 -250 0 0 645 0 645 -165 0 c-103 0 -165 -4 -165 -10 0 -6 58 -10 155 -10 l155 0 0 -635 0 -635 -255 0 -255 0 0 645 0 645 -145 0 c-90 0 -145 -4 -145 -10 0 -6 52 -10 135 -10 l135 0 0 -635 0 -635 -517 2 -518 3 -3 545 c-1 300 0 555 3 568 l5 22 297 0 c163 0 294 2 291 5 -3 3 -284 5 -626 5 l-622 0 -5 23 c-3 12 -4 123 -3 247 l3 225 128 3 127 3 0 257 c0 141 3 490 7 775 l6 517 370 0 369 0 -7 -773 -8 -774 609 -6 c335 -4 700 -7 812 -7 l202 0 0 535 0 535 -185 0 -185 0 0 248 0 249 -277 6 c-153 4 -340 7 -415 7 l-138 0 0 439 c0 342 3 441 13 445 6 3 72 4 146 1 74 -3 189 -5 257 -5z m5463 -256 l31 -6 0 -69 0 -69 -155 0 -155 0 0 75 0 75 124 0 c68 0 138 -3 155 -6z m-7111 -644 l62 0 0 -765 0 -766 -122 3 -123 3 -3 759 c-2 601 0 762 10 768 7 5 36 7 63 4 28 -3 78 -6 113 -6z m2042 -770 l0 -770 -605 0 -605 0 0 770 0 770 605 0 605 0 0 -770z m375 218 c-1 -21 -2 -252 -3 -513 l-2 -475 -182 0 -181 0 6 353 c4 193 7 425 7 515 l0 162 178 -2 177 -3 0 -37z m11828 -303 c317 -110 577 -202 577 -205 0 -6 -1186 -810 -1194 -810 -3 0 -6 276 -6 614 l0 614 23 -6 c13 -4 283 -97 600 -207z m-13783 -1775 l0 -570 -322 2 -323 3 -3 545 c-1 300 0 555 3 568 l5 22 320 0 320 0 0 -570z m5820 -230 l0 -80 -155 0 -155 0 0 80 0 80 155 0 155 0 0 -80z m-3170 -5 l0 -75 -165 0 -165 0 0 75 0 75 165 0 165 0 0 -75z m2468 -2 l3 -73 -176 0 -175 0 0 68 c0 38 3 72 7 76 4 3 81 5 172 4 l166 -3 3 -72z m-3018 -3 l0 -70 -155 0 -155 0 0 70 0 70 155 0 155 0 0 -70z m7960 5 l0 -65 -150 0 -150 0 0 65 0 65 150 0 150 0 0 -65z"/>
<path d="M11310 2561 c0 -5 84 -38 188 -73 l187 -65 3 -137 3 -136 -166 0 c-105 0 -165 -4 -165 -10 0 -7 111 -9 328 -8 l327 3 3 95 3 95 -108 37 c-59 19 -219 74 -355 121 -137 48 -248 82 -248 78z m558 -201 l132 -45 0 -81 c0 -57 -4 -83 -12 -86 -7 -2 -73 -2 -145 0 l-133 4 0 130 c0 101 3 129 13 126 7 -2 72 -23 145 -48z"/>
<path d="M9400 2990 c0 -6 72 -10 195 -10 l195 0 0 -425 0 -425 -400 0 -400 0 0 390 0 390 85 0 c50 0 85 4 85 10 0 6 -36 10 -88 10 l-89 0 -6 -212 c-4 -116 -7 -298 -7 -405 l0 -193 273 0 c151 0 403 -3 560 -7 215 -5 287 -3 287 5 0 9 -42 12 -145 12 l-146 0 1 215 1 215 260 0 c200 0 259 -3 260 -12 1 -7 1 -109 -1 -225 l-2 -213 441 0 c287 0 441 3 441 10 0 7 -150 10 -430 10 l-430 0 0 370 c0 217 4 370 9 370 5 0 177 -58 382 -130 324 -112 398 -135 378 -116 -10 9 -770 268 -774 264 -3 -3 -6 -74 -8 -159 l-2 -154 -255 3 c-140 1 -258 6 -262 10 -4 4 -4 94 -1 200 l6 192 159 0 c99 0 158 4 158 10 0 6 -128 10 -365 10 -237 0 -365 -4 -365 -10z"/>
<path d="M7077 3270 c-93 -16 -171 -31 -175 -34 -10 -11 32 -6 186 19 84 14 159 25 167 25 13 0 15 -27 15 -175 l0 -175 -180 0 -180 0 0 50 0 50 -97 -2 -98 -2 88 -3 87 -4 0 -44 0 -45 -375 0 -375 0 0 -380 0 -380 380 0 380 0 0 -55 0 -54 -87 -4 -88 -3 98 -2 97 -2 0 60 0 60 185 0 185 0 0 -180 0 -180 -22 5 c-38 9 -336 55 -354 55 -49 0 14 -14 197 -45 l203 -34 194 29 c107 16 197 31 200 34 10 10 -40 6 -178 -15 -74 -11 -156 -22 -183 -26 l-47 -6 2 179 3 179 163 3 162 2 0 -65 0 -65 100 0 c60 0 100 4 100 10 0 6 -37 10 -90 10 l-90 0 0 55 0 55 360 -2 360 -3 0 383 0 382 -355 0 -355 0 0 40 0 40 93 2 92 2 -100 5 -100 6 -3 -47 -3 -48 -175 0 -174 0 0 175 c0 160 1 175 18 175 9 0 82 -11 162 -25 80 -14 154 -25 165 -24 l20 0 -20 9 c-26 12 -325 60 -362 59 -15 0 -104 -13 -196 -29z m622 -725 l0 -365 -769 0 -770 0 0 365 0 365 770 0 769 0 0 -365z m651 0 l0 -365 -320 0 -320 0 0 365 0 365 320 0 320 0 0 -365z"/>
<path d="M3100 2680 l0 -530 883 0 882 0 0 530 0 530 -882 0 -883 0 0 -530z m1750 0 l0 -510 -865 0 -865 0 0 510 0 510 865 0 865 0 0 -510z"/>
<path id="1" d="M6550 4223 l0 -322 88 -3 c48 -2 122 -2 165 0 l77 3 0 322 0 322 -165 0 -165 0 0 -322z m170 157 l0 -150 -80 0 -80 0 0 150 0 150 80 0 80 0 0 -150z m149 13 c0 -75 -3 -143 -6 -150 -4 -9 -26 -13 -69 -13 l-64 0 0 150 0 150 70 0 71 0 -2 -137z m-149 -328 l0 -155 -80 0 -80 0 0 155 0 155 80 0 80 0 0 -155z m148 50 c2 -55 1 -124 -3 -152 l-6 -53 -65 0 -64 0 0 155 0 156 68 -3 67 -3 3 -100z"/>
<path id="2" d="M4830 4148 l0 -318 160 0 160 0 0 158 c1 275 -1 466 -5 470 -2 2 -74 4 -159 5 l-156 2 0 -317z m170 152 l0 -150 -75 0 -75 0 0 150 0 150 75 0 75 0 0 -150z m140 0 l0 -150 -65 0 -65 0 0 150 0 150 65 0 65 0 0 -150z m-140 -310 l0 -150 -75 0 -75 0 0 150 0 150 75 0 75 0 0 -150z m140 0 l0 -150 -65 0 -65 0 0 150 0 150 65 0 65 0 0 -150z"/>
<path id="3" d="M5770 4303 l0 -163 165 0 165 0 0 160 0 160 -87 1 c-49 1 -123 2 -165 3 l-78 1 0 -162z m170 2 l0 -145 -80 0 -80 0 0 145 0 145 80 0 80 0 0 -145z m150 0 l0 -145 -70 0 -70 0 0 145 0 145 70 0 70 0 0 -145z"/>
<path id="4" d="M10079 4266 c-191 -531 -304 -862 -295 -864 13 -5 282 -101 304 -109 9 -4 13 -2 9 4 -9 14 72 255 90 269 8 7 10 14 5 15 -6 2 37 137 94 299 57 162 103 301 104 308 0 6 -6 12 -13 12 -8 0 -75 22 -150 49 l-137 48 -11 -31z m98 -11 l51 -18 -34 -101 c-20 -56 -42 -120 -51 -143 l-15 -41 -56 19 c-31 11 -60 23 -64 27 -5 5 9 57 31 118 58 162 60 166 74 162 6 -3 35 -13 64 -23z m141 -50 c28 -11 52 -24 52 -30 0 -9 -64 -206 -85 -262 -3 -9 -21 -7 -67 9 -35 11 -66 24 -70 27 -4 4 10 56 31 116 57 161 60 167 74 163 6 -3 36 -13 65 -23z m-198 -270 c0 -16 -90 -269 -99 -278 -6 -6 -110 25 -129 39 -2 1 20 67 49 147 l51 144 64 -20 c35 -12 64 -26 64 -32z m96 -25 l62 -22 -45 -126 c-25 -70 -48 -135 -50 -144 -3 -10 -10 -18 -17 -18 -11 0 -118 39 -124 45 -8 8 93 295 103 292 5 -3 38 -14 71 -27z m-258 -255 c28 -11 52 -24 52 -29 0 -27 -86 -256 -97 -256 -6 0 -36 10 -67 21 -49 19 -56 25 -50 43 35 114 89 246 98 243 6 -2 35 -12 64 -22z m207 -75 c3 0 -85 -260 -90 -268 -3 -4 -118 39 -128 47 -6 6 40 156 78 253 6 16 12 15 72 -7 36 -14 67 -25 68 -25z"/>
<path id="5" d="M10776 4031 c-3 -5 -57 -159 -120 -342 -62 -184 -132 -385 -155 -448 -22 -63 -40 -115 -38 -116 17 -13 242 -83 249 -79 6 4 8 2 5 -3 -4 -6 4 -14 17 -17 13 -3 30 -8 38 -11 8 -3 14 1 14 12 0 26 196 587 206 591 4 2 6 7 3 12 -5 8 76 250 95 283 12 20 26 13 -168 81 -150 52 -139 49 -146 37z m44 -22 c-12 -8 -9 -10 12 -6 17 2 25 0 21 -6 -4 -6 2 -8 15 -5 12 4 20 2 16 -3 -3 -5 1 -9 8 -9 39 -1 39 -15 -6 -144 -24 -69 -46 -129 -49 -132 -10 -10 -148 40 -143 52 2 6 24 66 48 133 25 72 49 122 58 125 28 7 35 6 20 -5z m199 -65 l59 -17 -44 -130 c-24 -72 -48 -135 -52 -139 -8 -8 -99 18 -116 33 -8 7 23 105 75 247 10 26 5 26 78 6z m-259 -240 c40 -15 69 -32 67 -38 -2 -6 -21 -63 -42 -126 -21 -63 -41 -118 -44 -123 -9 -9 -146 37 -146 49 0 10 88 264 91 264 2 0 35 -12 74 -26z m152 -48 c9 0 14 -5 11 -10 -4 -5 3 -7 15 -4 12 4 20 2 17 -2 -3 -5 0 -10 7 -12 9 -3 -1 -43 -31 -134 -24 -71 -45 -130 -46 -131 0 -1 -30 7 -66 19 l-65 21 37 106 c59 170 56 163 82 155 12 -4 30 -8 39 -8z m-240 -235 l66 -22 -53 -152 c-53 -151 -53 -152 -83 -152 -17 -1 -29 2 -26 4 3 3 -16 13 -43 22 -26 9 -47 20 -47 25 7 43 101 304 109 301 5 -2 40 -14 77 -26z m156 -56 c31 -10 52 -22 49 -29 -2 -6 -26 -75 -53 -153 -35 -100 -54 -143 -67 -147 -9 -2 -15 0 -12 4 3 5 -19 16 -49 24 l-55 16 50 143 c27 78 52 148 54 156 3 7 11 11 18 8 6 -2 36 -12 65 -22z"/>
<path id="6" d="M11341 3398 c-74 -222 -140 -422 -147 -445 l-13 -42 149 -49 148 -50 147 437 c81 240 149 441 151 446 3 8 -277 107 -296 106 -3 -1 -66 -182 -139 -403z m279 337 c0 -14 -81 -258 -89 -267 -3 -4 -36 3 -72 14 l-66 22 43 130 c24 72 46 136 48 143 6 14 136 -25 136 -42z m137 -40 c2 -1 -19 -64 -45 -141 l-47 -139 -61 20 -62 20 50 142 50 142 57 -21 c31 -11 57 -22 58 -23z m-286 -230 l57 -18 -49 -145 c-27 -80 -50 -146 -52 -148 -3 -3 -126 34 -134 41 -2 1 73 234 92 284 3 7 11 11 18 8 6 -2 37 -12 68 -22z m189 -72 c0 -22 -95 -283 -103 -283 -21 0 -117 34 -117 41 0 6 51 155 95 276 3 9 20 7 64 -8 34 -12 61 -23 61 -26z m-304 -229 c27 -9 53 -20 58 -25 7 -6 -66 -240 -81 -258 -4 -6 -133 30 -133 37 0 24 87 262 95 262 6 0 34 -7 61 -16z m140 -50 c27 -9 52 -19 56 -23 7 -6 -71 -243 -83 -256 -7 -6 -99 22 -113 35 -9 9 71 260 83 260 4 0 30 -7 57 -16z"/>
<path id="7" d="M12170 3485 c-12 -36 -83 -240 -159 -454 -116 -329 -135 -391 -122 -397 35 -14 275 -94 276 -91 2 2 70 193 151 427 30 85 59 157 64 158 6 2 8 8 5 13 -3 5 17 74 46 154 28 80 50 148 48 150 -8 7 -212 75 -216 71 -2 -2 12 -9 31 -16 20 -6 36 -15 36 -20 0 -9 -91 -272 -97 -279 -5 -7 -115 34 -120 44 -2 6 18 71 45 145 43 119 52 135 71 133 30 -4 26 3 -8 15 l-30 11 -21 -64z m245 -26 c32 -12 55 -26 52 -32 -2 -7 -19 -52 -36 -102 -18 -49 -40 -109 -48 -133 -9 -24 -21 -41 -27 -39 -6 2 -34 12 -63 21 l-52 17 50 141 c27 77 49 142 49 144 0 8 20 4 75 -17z m-238 -255 c45 -16 52 -22 47 -39 -6 -19 -5 -19 8 -2 13 18 16 18 71 -3 31 -12 57 -25 57 -29 0 -9 -90 -264 -95 -269 -4 -5 -107 28 -117 37 -4 4 11 58 33 120 22 63 38 116 36 118 -2 2 -16 -31 -31 -74 -15 -43 -34 -97 -43 -120 l-15 -42 -47 18 c-25 10 -54 21 -63 24 -18 6 -8 40 77 276 3 7 11 11 18 8 6 -2 36 -13 64 -23z m-62 -316 c10 -10 -86 -278 -99 -278 -19 0 -111 34 -115 43 -2 5 18 70 44 146 l49 137 57 -21 c32 -11 61 -24 64 -27z m143 -43 c4 -3 -90 -269 -99 -279 -8 -9 -94 18 -113 35 -5 4 12 67 39 147 l49 139 60 -20 c34 -11 62 -21 64 -22z"/>
<path id="8" d="M12900 3303 c-10 -2 -31 -50 -57 -126 -47 -138 -196 -570 -241 -694 -16 -46 -25 -83 -20 -83 5 0 72 -25 149 -56 77 -31 142 -54 144 -52 7 7 315 886 315 899 0 4 -21 15 -47 25 -27 9 -84 32 -128 51 -97 42 -96 42 -115 36z m20 -14 c-12 -9 -11 -10 8 -6 12 3 20 2 17 -3 -2 -4 16 -13 40 -20 25 -7 45 -15 45 -19 0 -17 -93 -281 -99 -281 -4 0 -35 10 -70 21 -50 17 -61 25 -56 38 4 9 23 61 42 116 49 141 60 165 75 165 9 0 9 -3 -2 -11z m249 -105 c5 -5 -78 -254 -89 -267 -5 -5 -35 1 -68 13 l-61 22 50 141 c27 77 49 142 49 143 0 4 112 -45 119 -52z m-319 -214 c30 -12 61 -23 67 -25 9 -3 -1 -43 -33 -137 -26 -73 -49 -136 -53 -140 -7 -8 -109 26 -124 41 -4 4 14 69 40 144 27 75 48 137 48 137 0 0 25 -9 55 -20z m167 -57 c29 -9 53 -20 53 -24 0 -21 -93 -279 -101 -279 -8 0 -112 39 -117 45 -7 6 91 275 101 275 6 0 34 -8 64 -17z m-250 -244 l62 -20 -50 -142 c-27 -77 -51 -142 -52 -144 -2 -1 -33 9 -69 23 l-67 25 35 97 c58 164 65 182 73 182 4 0 35 -9 68 -21z m151 -54 c31 -10 52 -22 49 -29 -2 -6 -23 -68 -46 -138 -23 -69 -50 -132 -59 -140 -8 -7 -13 -8 -9 -2 4 7 -16 18 -54 29 -33 10 -58 21 -57 25 2 3 25 68 52 143 28 80 54 136 60 134 6 -2 35 -12 64 -22z"/>
<path id="52/53" d="M13608 2752 l-68 -3 -1 -47 c-1 -26 -3 -71 -5 -100 -3 -34 -1 -51 6 -47 6 4 10 -16 10 -55 0 -38 -4 -59 -10 -55 -5 3 -10 1 -10 -4 0 -7 56 -11 165 -11 l165 0 0 160 0 160 -62 1 c-35 1 -76 2 -93 3 -16 0 -60 0 -97 -2z m242 -87 l0 -75 -145 0 -145 0 0 75 0 75 145 0 145 0 0 -75z m0 -155 l0 -70 -145 0 -145 0 0 70 0 70 145 0 145 0 0 -70z"/>
<path id="9" d="M13155 2217 c-72 -48 -131 -91 -133 -96 -4 -12 340 -521 351 -521 6 0 213 137 265 176 3 2 -65 104 -313 469 l-40 60 -130 -88z m210 -46 c43 -65 79 -121 80 -126 0 -8 -114 -90 -118 -84 -8 10 -154 225 -160 236 -5 7 14 27 50 52 32 22 60 40 63 40 3 0 41 -53 85 -118z m-142 -74 c37 -56 75 -112 83 -124 15 -21 13 -23 -46 -63 -34 -23 -65 -38 -69 -34 -13 16 -161 234 -161 239 0 5 112 85 119 85 3 0 37 -46 74 -103z m326 -198 c39 -58 71 -111 71 -116 0 -15 -111 -86 -120 -76 -20 23 -160 233 -160 240 0 4 26 25 58 45 44 29 59 35 68 25 6 -7 43 -60 83 -118z m-139 -79 c44 -66 80 -123 80 -127 0 -4 -26 -25 -58 -45 -44 -29 -59 -35 -68 -25 -6 7 -45 62 -87 124 l-77 112 57 40 c32 22 61 40 65 40 4 1 44 -53 88 -119z"/>
<path id="10" d="M12574 1799 c-65 -44 -125 -86 -132 -93 -11 -10 18 -58 154 -257 91 -134 170 -248 174 -253 7 -7 269 162 269 174 0 3 -78 118 -173 257 l-173 252 -119 -80z m201 -56 l79 -116 -31 -26 c-17 -14 -45 -34 -61 -44 l-30 -17 -78 112 c-42 62 -77 118 -78 125 -1 13 91 81 110 82 6 1 46 -51 89 -116z m-135 -85 c41 -61 76 -114 78 -118 2 -4 -23 -26 -55 -49 -72 -51 -63 -54 12 -4 31 20 57 34 59 32 22 -27 156 -229 156 -235 -1 -10 -110 -88 -114 -82 -20 25 -327 481 -329 488 -2 10 91 79 108 79 6 0 44 -50 85 -111z m309 -170 l81 -117 -61 -42 c-36 -24 -65 -37 -70 -32 -24 24 -157 229 -152 236 8 12 107 77 115 75 4 -2 43 -56 87 -120z"/>
<path id="11" d="M4410 1755 c0 -43 1 -45 30 -45 l30 0 0 -164 c0 -90 3 -171 6 -180 5 -14 28 -16 155 -16 l149 0 0 175 0 175 25 0 c23 0 25 3 25 50 l0 50 -210 0 -210 0 0 -45z m410 -3 l0 -38 -107 2 c-60 1 -150 2 -200 3 l-93 1 0 35 0 35 200 0 200 0 0 -38z m-200 -212 l0 -160 -65 0 -65 0 0 160 0 160 65 0 65 0 0 -160z m149 -5 l1 -165 -65 0 -65 0 0 165 0 165 64 0 65 0 0 -165z m-182 -172 c-20 -2 -52 -2 -70 0 -17 2 0 4 38 4 39 0 53 -2 32 -4z"/>
<path id="12" d="M3710 1740 c0 -49 1 -50 30 -50 l30 0 0 -160 0 -160 140 0 140 0 0 161 0 161 35 -4 35 -4 0 53 0 53 -205 0 -205 0 0 -50z m400 0 l0 -40 -195 0 -195 0 0 40 0 40 195 0 195 0 0 -40z m-210 -205 l0 -155 -60 0 -60 0 0 155 0 155 60 0 60 0 0 -155z m134 146 c3 -4 3 -74 -1 -155 l-6 -146 -54 0 -53 0 0 155 0 155 54 0 c30 0 57 -4 60 -9z"/>
<path id="13" d="M9720 1398 l0 -316 160 -1 160 -2 0 315 0 315 -160 3 -160 3 0 -317z m150 148 l0 -154 -65 0 -65 0 0 154 0 154 65 0 65 0 0 -154z m160 -1 l0 -155 -75 0 -75 0 0 155 0 155 75 0 75 0 0 -155z m-160 -305 l0 -140 -70 0 -70 0 0 140 0 140 70 0 70 0 0 -140z m160 0 l0 -140 -70 0 -70 0 0 140 0 140 70 0 70 0 0 -140z"/>
<path id="14" d="M9050 1550 l0 -159 160 -3 160 -3 0 163 0 162 -160 0 -160 0 0 -160z m310 0 l0 -150 -70 0 -70 0 0 150 0 150 70 0 70 0 0 -150z m-160 -5 l0 -145 -65 0 -65 0 -1 33 c0 17 -2 83 -5 145 l-4 112 70 0 70 0 0 -145z"/> <path id="34" d="M10560 1460 l0 -160 80 0 80 0 0 160 0 160 -80 0 -80 0 0 -160z m150 -5 l0 -145 -70 0 -70 0 0 145 0 145 70 0 70 0 0 -145z"/>
<path id="37/38" d="M11210 1355 l0 -165 160 0 160 0 0 165 0 165 -160 0 -160 0 0 -165z m150 0 l0 -155 -65 0 -65 0 0 155 0 155 65 0 65 0 0 -155z m160 0 l0 -155 -70 0 -70 0 0 155 0 155 70 0 70 0 0 -155z"/>
<path id="15" d="M12007 1427 c-75 -51 -137 -95 -137 -99 0 -7 332 -502 350 -521 10 -11 275 171 274 187 -1 11 -287 441 -334 503 l-17 22 -136 -92z m222 -48 c46 -66 79 -124 75 -128 -39 -33 -117 -80 -124 -76 -5 3 -44 58 -86 121 -42 63 -78 113 -80 111 -3 -2 32 -57 76 -122 44 -66 80 -121 80 -125 0 -3 -26 -22 -58 -42 -44 -29 -59 -35 -68 -25 -6 7 -45 62 -87 122 l-75 110 126 88 c70 48 129 87 132 87 3 0 43 -54 89 -121z m175 -257 c43 -64 78 -121 78 -126 1 -6 -26 -29 -60 -53 l-61 -44 -78 118 c-44 65 -82 123 -86 130 -7 12 96 92 118 92 6 0 45 -52 89 -117z m-135 -101 c45 -66 81 -122 81 -124 0 -6 -108 -77 -117 -77 -9 1 -161 222 -165 240 -3 15 100 92 113 85 4 -3 44 -59 88 -124z"/>
<path id="16" d="M7580 1374 c-1 -33 -2 -110 -3 -172 l-2 -112 168 0 167 0 0 168 0 167 -165 4 -165 3 0 -58z m150 -114 l0 -150 -65 0 -65 0 0 150 0 150 65 0 65 0 0 -150z m164 142 c3 -5 2 -74 -1 -155 l-6 -147 -69 0 -68 0 0 155 0 155 69 0 c39 0 72 -4 75 -8z"/>
<path id="17" d="M6930 1250 l0 -160 83 0 82 0 4 160 3 160 -86 0 -86 0 0 -160z m150 0 l0 -140 -65 0 -65 0 0 140 0 140 65 0 65 0 0 -140z"/>
<path id="18" d="M4930 920 l0 -320 165 0 165 0 0 320 0 320 -165 0 -165 0 0 -320z m160 155 l0 -145 -75 0 -75 0 0 138 c0 76 3 142 7 145 3 4 37 7 75 7 l68 0 0 -145z m160 0 l0 -145 -75 0 -75 0 0 145 0 145 75 0 75 0 0 -145z m-160 -310 l0 -155 -75 0 -75 0 0 155 0 155 75 0 75 0 0 -155z m160 0 l0 -155 -75 0 -75 0 0 155 0 155 75 0 75 0 0 -155z"/>
<path id="19" d="M3710 1180 c0 -49 1 -50 30 -50 l29 0 -6 -160 -6 -160 161 0 161 0 3 158 c3 156 3 157 26 156 20 -1 22 4 22 53 l0 53 -210 0 -210 0 0 -50z m410 0 l0 -40 -200 0 -200 0 0 40 0 40 200 0 200 0 0 -40z m-200 -210 l0 -150 -70 0 -70 0 0 150 0 150 70 0 70 0 0 -150z m150 0 l0 -150 -65 0 -65 0 0 150 0 150 65 0 65 0 0 -150z"/>
<path id="20" d="M9080 913 l0 -303 170 0 170 0 0 300 0 299 -170 3 -170 3 0 -302z m320 152 l0 -135 -70 0 -70 0 0 135 0 135 70 0 70 0 0 -135z m-150 -5 l0 -130 -75 0 -75 0 0 130 0 130 75 0 75 0 0 -130z m150 -285 l0 -145 -70 0 -70 0 0 145 0 145 70 0 70 0 0 -145z m-152 -7 l-3 -143 -72 -3 -73 -3 0 146 0 145 75 0 76 0 -3 -142z"/>
<path id="21" d="M8430 975 l0 -165 160 0 160 0 0 165 0 165 -160 0 -160 0 0 -165z m140 0 l0 -155 -60 0 -60 0 0 155 0 155 60 0 60 0 0 -155z m170 -5 l0 -150 -80 0 -80 0 0 150 0 150 80 0 80 0 0 -150z"/>
<path id="22" d="M7580 840 c-1 -52 -2 -125 -3 -163 l-2 -67 163 0 162 0 0 160 0 160 -57 2 c-32 0 -104 2 -160 2 l-103 1 0 -95z m157 -67 l-2 -148 -67 -3 -68 -3 0 151 0 150 70 0 70 0 -3 -147z m153 -8 l0 -145 -65 0 -65 0 0 145 0 145 65 0 65 0 0 -145z"/>
<path id="23" d="M9760 776 l0 -166 165 0 165 0 0 163 0 162 -165 4 -165 3 0 -166z m150 -6 l0 -150 -65 0 -65 0 0 150 0 150 65 0 65 0 0 -150z m170 -5 l0 -145 -75 0 -75 0 0 145 0 145 75 0 75 0 0 -145z"/>
<path id="24" d="M6950 770 l0 -160 75 0 75 0 0 160 0 160 -75 0 -75 0 0 -160z m140 0 l0 -140 -60 0 -60 0 0 140 0 140 60 0 60 0 0 -140z"/>
<path id="25" d="M11244 917 c-2 -7 -3 -80 -2 -162 l3 -150 163 -3 162 -2 0 165 0 165 -160 0 c-122 0 -162 -3 -166 -13z m152 -147 c-1 -77 -5 -143 -9 -146 -3 -4 -32 -7 -64 -7 l-58 0 -3 147 -3 146 70 0 70 0 -3 -140z m161 -2 l-2 -143 -65 -6 c-36 -3 -68 -4 -72 -2 -5 2 -8 69 -8 149 l0 144 75 0 74 0 -2 -142z"/>
</g>
</svg>
</div>
</div>
<script>
<?php
$('#valider').click(function(){
document.getElementById('".$numero_bureau;"').style.color = "red";
});
?>
$('#map g').on("click", "path", function(){
replay_click(this.id);
});
function replay_click(clicked_id){
$.ajax({
url: 'find.php',
type: "post",
data: { getData: true },
dataType: 'html',
success: function(data, clicked_id)
{
var infos = data;
infos.foreach(info)
{
$('#list_Output').html(info);
}
}
});
}
</script>
</body>
</html>
And i got 2 php pages:
<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=planinteractif;charset=utf8',
'root', 'root');
if(isset($_POST['nom'])){
$numero_bureau = $bdd->query('SELECT numero_bureau from User where nom=' +
$_POST['nom'] + ';')
}
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
?>
<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=planinteractif;charset=utf8',
'root', 'root');
if(isset($_POST['nom'])){
$infos = $bdd->query('SELECT * from User where numero_bureau=' +
$_POST['clicked_id'] + ';')
}
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
?>
And a irrelevant css page i think, I am looking forward an answer i think its pretty easy but i am a beginner in web tech. TY
EDIT : taken note of advices you gave
Several issues:
your <form> has an action, but no submit control, so that action is never triggered.
onclick="Validate.php" doesn't make sense. The attribute expects a Javascript command for client-side execution.
Anyway, you are then defining another event listener function with $document.getElementById('valider').click() for the same event. THat mixes jQuery syntax with native syntax. Either you use jQUery and write
$('#valider').click(function...);
or you use the native API and write
document.getElementById('valider').addEventListener(function...);
The listener function contains one static $numero_bureau that is already mixed in server-side. Which number will that be?
attributes to elements in the SVG namespace are case-sensitive. So the event listener attribute must be onclick, not onClick.
the function called is reply_click, but the function defined has the name replay_click.
the this in that function call is the global window object, not the element as you seem to think. Binding this to an element is a jQuery facility. For it to work, you need to define your event listener differently. Do not define a onclick attribute, but write this procedure as part of the script:
$('#map g').on("click", "path", function () {
replay_click(this.id);
});
This will add an event handler to the group enclosing the paths, but the this will be bound to the individual <path> element that was actually clicked.

Searching a NodeList in JavaScript

I have a NodeList of DOM elements with id's conforming to the following pattern:
prefix-number
(e.g. square-115, circle-15, triangle-2, etc.)
From a certain id, I need a reference to all the elements in the NodeList that have the same number but a different prefix.
For example, from the element with id="ellipse-25", how can I reference all the elements that are with the same number but a different prefix (e.g. polygon-25, square-25), if any?
In JavaScript, what is the most efficient way to do this? Can it be achieved without multiple or no NodeList iterations?
P.S. Here is the sample NodeList, as asked by Gangadhar Jannu, though it is not necessary, as it is more a conceptual question rather than a practical one:
<NodeList length="36">
<path class="segm-lad segm-stroke" id="psax-1" POINTER-EVENTS="auto" d="M 436.508 173.867 A 192.267 192.267 0 0 0 270 77.7333 L 270 130 A 140 140 0 0 1 391.244 200 L 436.508 173.867 Z"></path>
<path class="segm-lad segm-stroke" id="psax-2" POINTER-EVENTS="auto" d="M 270 77.7333 A 192.267 192.267 0 0 0 103.492 173.867 L 148.756 200 A 140 140 0 0 1 270 130 L 270 77.7333 Z"></path>
<path class="segm-rca segm-stroke" id="psax-3" POINTER-EVENTS="auto" d="M 103.492 173.867 A 192.267 192.267 0 0 0 103.492 366.133 L 148.756 340 A 140 140 0 0 1 148.756 200 L 103.492 173.867 Z"></path>
<path class="segm-rca segm-stroke" id="psax-4" POINTER-EVENTS="auto" d="M 103.492 366.133 A 192.267 192.267 0 0 0 270 462.267 L 270 410 A 140 140 0 0 1 148.756 340 L 103.492 366.133 Z"></path>
<path class="segm-rca-cx segm-stroke" id="psax-5" POINTER-EVENTS="auto" d="M 270 462.267 A 192.267 192.267 0 0 0 436.508 366.133 L 391.244 340 A 140 140 0 0 1 270 410 L 270 462.267 Z"></path>
<path class="segm-lad-cx segm-stroke" id="psax-6" POINTER-EVENTS="auto" d="M 436.508 366.133 A 192.267 192.267 0 0 0 436.508 173.867 L 391.244 200 A 140 140 0 0 1 391.244 340 L 436.508 366.133 Z"></path>
<path class="segm-lad segm-stroke" id="psax-7" POINTER-EVENTS="auto" d="M 391.244 200 A 140 140 0 0 0 270 130 L 270 182.267 A 87.7333 87.7333 0 0 1 345.979 226.133 L 391.244 200 Z"></path>
<path class="segm-lad segm-stroke" id="psax-8" POINTER-EVENTS="auto" d="M 270 130 A 140 140 0 0 0 148.756 200 L 194.021 226.133 A 87.7333 87.7333 0 0 1 270 182.267 L 270 130 Z"></path>
<path class="segm-rca-lad segm-stroke" id="psax-9" POINTER-EVENTS="auto" d="M 148.756 200 A 140 140 0 0 0 148.756 340 L 194.021 313.867 A 87.7333 87.7333 0 0 1 194.021 226.133 L 148.756 200 Z"></path>
<path class="segm-rca segm-stroke" id="psax-10" POINTER-EVENTS="auto" d="M 148.756 340 A 140 140 0 0 0 270 410 L 270 357.733 A 87.7333 87.7333 0 0 1 194.021 313.867 L 148.756 340 Z"></path>
<path class="segm-rca-cx segm-stroke" id="psax-11" POINTER-EVENTS="auto" d="M 270 410 A 140 140 0 0 0 391.244 340 L 345.979 313.867 A 87.7333 87.7333 0 0 1 270 357.733 L 270 410 Z"></path>
<path class="segm-lad-cx segm-stroke" id="psax-12" POINTER-EVENTS="auto" d="M 391.244 340 A 140 140 0 0 0 391.244 200 L 345.979 226.133 A 87.7333 87.7333 0 0 1 345.979 313.867 L 391.244 340 Z"></path>
<path class="segm-lad segm-stroke" id="psax-13" POINTER-EVENTS="auto" d="M 354.744 247.293 A 87.7333 87.7333 0 0 0 247.293 185.256 L 260.821 235.742 A 35.4667 35.4667 0 0 1 304.258 260.821 L 354.744 247.293 Z"></path>
<path class="segm-lad segm-stroke" id="psax-14" POINTER-EVENTS="auto" d="M 247.293 185.256 A 87.7333 87.7333 0 0 0 185.256 292.707 L 235.742 279.179 A 35.4667 35.4667 0 0 1 260.821 235.742 L 247.293 185.256 Z"></path>
<path class="segm-lad segm-stroke" id="psax-15" POINTER-EVENTS="auto" d="M 185.256 292.707 A 87.7333 87.7333 0 0 0 292.707 354.744 L 279.179 304.258 A 35.4667 35.4667 0 0 1 235.742 279.179 L 185.256 292.707 Z"></path>
<path class="segm-lad-cx segm-stroke" id="psax-16" POINTER-EVENTS="auto" d="M 292.707 354.744 A 87.7333 87.7333 0 0 0 354.744 247.293 L 304.258 260.821 A 35.4667 35.4667 0 0 1 279.179 304.258 L 292.707 354.744 Z"></path>
<path class="segm-lad" id="a3c-2" POINTER-EVENTS="auto" d="M 174.4 72.6 c -2.2 1.1 -3.9 -0.9 -6.1 -0.8 c -1.1 0 -2 0.6 -2.9 1 c -4.5 1.9 -9.2 3 -13.8 3.8 c -3.6 0.7 -7.3 1.1 -11 2.3 c -1.6 0.5 -3.2 0.8 -4.8 0.9 l 2.1 19.8 c 4.9 -0.7 10.4 -1.9 15.9 -3.5 c 1.8 -0.5 8.2 -2.5 9.9 -3.2 c 6.2 -2.7 8.9 -4.3 14.8 -7.1 c 1.6 -0.8 4.4 -2.4 5.8 -3.4 c 1 -0.7 6.1 -4.2 6.1 -8.2 c 0 -2.5 -9.3 -5.1 -11.6 -4.3 C 177.2 70.4 176.1 71.8 174.4 72.6 Z"></path>
<path class="segm-rca-cx" id="a3c-5" POINTER-EVENTS="auto" d="M 152.3 201 c 13.2 1.4 25.6 -2.5 39 -2.7 c 4.6 0 9.1 0.6 13.5 -0.5 c 2.6 -0.7 5.3 -1 7.7 -2.4 c 1.1 -0.6 2.1 -1.3 3.1 -2 c 3.6 -2.3 5.5 -6.5 5 -10.7 c -0.5 -3.9 -2 -7.6 -5.1 -10.5 c -2.2 -2 -4.8 -2.7 -7.7 -3.1 c -1.4 -0.1 -2.8 -0.2 -4.2 -0.2 c -1.7 0.9 -3.6 1.4 -5.5 2.2 c -0.8 0.3 -1.6 0.9 -2.4 1.2 c -3 1.1 -5.8 2.2 -8.8 3.2 c 0 -0.1 0 -0.2 0 -0.3 c -3.2 0.9 -6.3 1.9 -9.7 2 c -3.7 0.1 -7.1 0.6 -10.8 0.6 c -1.2 0 -3.5 -0.6 -4.7 -0.5 c -3.9 0.2 -2.9 1.3 -6.8 1.6 c -1.4 0.1 -6 -1.5 -7.7 -1.8 c -3.4 -0.7 -6.8 -1.3 -10.2 -2.1 l -5.7 22.1 C 138.4 199.3 145.2 200.2 152.3 201 Z"></path>
<path class="segm-rca-cx" id="a3c-11" POINTER-EVENTS="auto" d="M 83.9 177.3 c 3 0.8 13.5 5.8 15.7 6.8 c 4.5 2.1 6.4 2.9 10.3 4.6 c 8.3 3.6 11.1 4.8 17.1 7 c 1.5 0.6 3 1 4.5 1.5 l 5.7 -22.1 c -0.8 -0.2 -1.6 -0.4 -2.4 -0.6 c -5.1 -1.4 -10 -3.5 -14.5 -6.3 c -5.4 -0.5 -5.8 -3.8 -8.6 -7.7 c -1.1 -1.5 -3.3 -2.2 -3.5 -3.2 c -0.2 -0.9 1.1 -1.5 0.8 -2.4 c -1 -2.8 -3.9 -2.8 -6 -4 c -0.6 -0.4 -1.3 -1.2 -2 -1.5 c -2.2 -0.7 -4.2 -1.5 -6.4 -2.1 c -2.8 -0.7 -5.7 -0.8 -8.4 -1.5 s -4.9 -1.9 -5.8 -2.2 c -2.6 -0.6 -4.9 -1.1 -7 -1.7 l -8.9 28.4 C 70.2 173 76.5 175.3 83.9 177.3 Z"></path>
<path class="segm-lad" id="a3c-8" POINTER-EVENTS="auto" d="M 127.4 80.3 c -3.2 0.4 -6.2 -0.1 -9.4 -0.1 c -0.6 0.3 -1.3 0.5 -2 0.5 c -9.9 -0.8 -26 0 -38.9 0.9 l 2.7 19.7 c 5.4 -0.9 10.9 -0.6 16.5 -0.7 c 6.8 -0.1 13 0.4 19.4 0.2 c 4 -0.1 8.1 -0.5 12.1 -0.4 c 2.7 0.1 6.2 -0.2 10.1 -0.7 l -2.1 -19.8 C 133.1 80.1 130.2 79.9 127.4 80.3 Z"></path>
<path class="segm-lad-cx" id="a3c-16" POINTER-EVENTS="auto" d="M 23 147.9 c 1.4 0.9 2.8 1.8 4.2 2.6 c 14.1 8.1 24.7 14.6 37.1 19.9 l 8.9 -28.4 c -6.6 -1.7 -11.4 -3.7 -18 -9.6 c -0.7 -0.6 -0.9 -1.7 -0.3 -2.5 c 0.8 -1 2.1 -1.5 3.1 -2.5 c 0.9 -0.9 0.7 -2.4 -0.6 -2.9 c -6.2 -2.3 -11.9 2.2 -18 1.7 c -1.6 -0.1 -2.4 -0.4 -2.6 -0.7 H 23 V 147.9 Z"></path>
<path class="segm-lad" id="a3c-14" POINTER-EVENTS="auto" d="M 75.2 81.6 c -12.1 0.9 -24 4 -35 9.2 c -6.3 3 -13 6.4 -17.3 9 v 25.7 h 13.9 c -0.4 -0.4 0.4 -0.9 0.6 -1 c 2.8 -1.1 7.9 0.6 8.3 -3 c 0.2 -1.3 -2.3 -1.5 -2.7 -2.8 c -0.5 -2 2.4 -1.5 3.4 -2.3 c 1 -0.8 0.9 -2.7 2.3 -2.9 c 1.7 -0.3 3.7 0.4 5 -0.9 c 0.5 -0.5 0.6 -1.3 1 -1.8 c 0.5 -0.6 1.6 -0.6 2.3 -1.1 c 0.9 -0.7 3.3 -2.2 4.1 -2.8 c 2 -1.4 2.6 -1.8 5.1 -2.8 c 0.6 -0.3 1.7 -0.5 2.4 -0.5 c 3 0 5.9 -0.1 8.8 -2 c 0.8 -0.2 1.6 -0.3 2.4 -0.5 L 77 81.5 C 76.4 81.5 75.8 81.6 75.2 81.6 Z"></path>
<path class="segm-rca-lad" id="a4c-9" POINTER-EVENTS="auto" d="M 74.6 93.2 c 1.4 2.5 -2.2 4.7 -1.8 7.6 c 0.3 2.1 3 1.2 3.4 2.9 c 1.3 6.3 1.2 13 3.2 18.1 c 1.9 4.8 0 15.4 5.9 19 c 1.2 0.8 -1.2 1.2 -1.6 1.9 c -0.6 1.1 -0.5 2 -0.2 2.8 l 23.9 -3.1 c -0.2 -2.4 0.9 -5.1 -0.7 -7.3 c -0.8 -1.1 -1.8 -2.1 -2.8 -3.1 c -0.9 -0.9 0.3 -1.8 1.1 -2.7 c 0.8 -0.9 0.3 -2.2 0.5 -4.2 c 0.4 -4.2 -0.8 -8.2 -2.6 -12.1 c -0.6 -1.3 1.1 -3.2 0.3 -4.8 c -3.4 -6.5 -4.8 -13 -5.8 -20.1 H 72 C 72.7 89.7 73.6 91.4 74.6 93.2 Z"></path>
<path class="segm-rca" id="a4c-3" POINTER-EVENTS="auto" d="M 86.5 149.7 c 3.9 6.2 3.3 13 6.3 19.4 c 0 0.1 0.1 0.1 0.1 0.2 c 2.1 4.5 4.3 9.7 4.9 15.1 c 0.4 3.2 0.8 7.1 0.8 7.1 c 0.3 2.4 2.4 7.5 3 8 c 1.4 1 3.6 0.9 5 0 c 1 -0.7 1.4 -1.6 2 -3 c 0.7 -1.6 2 -5 2 -5 s 1.1 -2.8 2.2 -5.7 c 1 -5.4 0.4 -10.9 1.3 -16.3 c 1.7 -9.8 -3.2 -17.7 -6.5 -25.9 c -0.2 -0.4 -0.3 -0.9 -0.3 -1.3 l -23.9 3.1 C 84.1 146.9 85.6 148.2 86.5 149.7 Z"></path>
<path class="segm-lad" id="a4c-14" POINTER-EVENTS="auto" d="M 72.8 25.9 c -1.4 2.5 -2.4 5.1 -2.8 7.6 c -1.5 8.7 -1.8 27.8 -1.8 27.8 c 0.3 6.3 0.2 15.1 2 21.4 c 0.5 1.9 1.1 3.5 1.8 5.2 h 25.3 c 0 -0.3 -0.1 -0.5 -0.1 -0.8 c -0.4 -2.7 0.3 -5.6 0.2 -8.4 c -2.7 -7.7 -4 -14.4 -4.8 -19.3 c -1.5 -10.6 -1.8 -17.1 0 -20 c 2.6 -4.4 2 -7.4 2.3 -8.7 c 0.3 -1.6 3.3 -1.1 3.7 -1.3 c 0.6 -0.4 1.2 -0.7 1.8 -1 l -2.3 -8.8 L 72.8 25.9 Z"></path>
<path class="segm-lad" id="a4c-17" POINTER-EVENTS="auto" d="M 98 19 l 0.2 0.7 l 31.6 -7.7 c -11.4 -5.6 -24.1 -8.2 -37.2 -5.6 C 88.5 7.2 78 16.2 72.8 25.9 l 25.4 -6.2 L 98 19 Z"></path>
<path class="segm-lad-cx" id="a4c-6" POINTER-EVENTS="auto" d="M 225.1 158.2 c -0.3 -4.3 -0.8 -8.5 -1.4 -12.7 c -1.7 -11.4 -7 -21.7 -12.6 -32.2 l -29 12.9 c 0.3 0.5 0.7 1 1 1.5 c 0.6 0.8 0.5 2.4 0.8 3.7 c 0.7 4.3 4.9 6.7 6.5 10.7 c 1.9 4.9 6.5 9.2 7.9 14.5 c 0 0 1 3.9 2.4 9.4 c 0.6 2.4 1.6 4.6 3 6.6 c 1.7 2.4 3.4 4.4 5 5 c 3.5 1.5 7.2 1.5 9 1 c 3.2 -0.9 5.8 -4.6 7.4 -10.3 c 0.3 -0.9 0.4 -1.9 0.4 -2.8 C 225.4 163 225.3 160.6 225.1 158.2 Z"></path>
<path class="segm-lad-cx" id="a4c-12" POINTER-EVENTS="auto" d="M 205.9 103.4 c -8.5 -16.7 -18 -32.5 -29.8 -46.9 L 149.3 77 c 0.3 1.5 1.1 3.1 1.3 4.5 c 2.9 4.4 1.6 9.8 1.4 21.7 c -0.1 4.4 0 9.8 0.6 16.3 c 1.4 16.3 8.6 8.1 12 3 c 4 -6 4.9 -16.9 6 -16 c 4.1 3.4 -1.2 5.3 3.9 7.9 c 3.6 1.9 4.9 7.6 7.5 11.8 l 29 -12.9 C 209.3 110 207.6 106.7 205.9 103.4 Z"></path>
<path class="segm-lad-cx" id="a4c-16" POINTER-EVENTS="auto" d="M 161.2 40.6 c -4.2 -4 -6 -9.7 -10.3 -13.7 c -6.3 -5.9 -13.4 -11 -21.2 -14.8 l -31.6 7.7 l 2.3 8.8 c 2.9 -1.3 5.9 -1.2 9.2 -0.1 c 1.1 0.3 2.1 2.7 3 3.1 c 2.1 0.8 1 -3 5.6 0.6 c 3.4 2.7 6.5 4.6 8.4 6.4 c 8.3 8.2 12.6 9.4 16 19 c 4.5 12.7 9.6 13.3 7 17 c -0.5 0.7 -0.5 1.6 -0.3 2.5 L 176 56.5 C 171.5 51 166.6 45.6 161.2 40.6 Z"></path>
<path class="segm-lad" id="a2c-15" POINTER-EVENTS="auto" d="M 54.6 30 c -0.1 0.1 -0.1 0.2 -0.2 0.3 c -5 7.1 -13.9 24.4 -17.4 32.5 c -1.7 3.9 -4.2 9.5 -6.8 15.5 l 29.4 8.4 c 0.3 -0.3 1.8 -2.1 2.2 -5 c 0.5 -3.3 0 -9.3 0 -9.3 s 2.5 0 4 -2.8 c 1.5 -2.8 1.5 -7.1 2.8 -9.1 c 1.3 -2 2.8 -3 4.8 -3.5 c 2 -0.5 2.8 -2 3.3 -3.5 c 0.5 -1.5 1.8 -7.1 1.8 -7.1 s 0.5 3.8 3 3.8 c 0.1 0 0.2 0 0.3 0 V 30 H 54.6 Z"></path>
<path class="segm-lad" id="a2c-17" POINTER-EVENTS="auto" d="M 107.9 30 c -7 -8.4 -19.6 -18.3 -29 -18.3 c -10.4 0 -19.1 11.3 -24.2 18.3 h 27.2 H 107.9 Z"></path>
<path class="segm-rca" id="a2c-4" POINTER-EVENTS="auto" d="M 3.3 169.9 c -0.3 4.8 -0.8 4.5 0 11.6 c 0.8 7.1 5 23.7 9.8 33.8 c 4.1 8.6 18.8 19.6 21.4 17.3 c 9 -8 0.6 -16 -0.6 -19.5 c -1.3 -3.5 -6.3 -11.1 -7.1 -17.6 c -0.8 -6.5 0 -12.6 -0.3 -15.6 c -0.3 -3 -1 -5.8 -2 -6.8 c -1 -1 1.8 0.3 1.8 0.3 s 0.8 -6.8 1.3 -10.8 c 0.5 -4 2 -2.5 2 -2.5 c 0.4 -2 0.9 -4.6 1.4 -7.6 l -24 -7 C 5.2 153.4 3.6 162.7 3.3 169.9 Z"></path>
<path class="segm-rca" id="a2c-10" POINTER-EVENTS="auto" d="M 22.9 96.6 c -3.5 10.1 -11.3 30.7 -13.9 40.3 c -0.7 2.5 -1.4 5.4 -2 8.4 l 24 7 c 1.6 -8.3 4.1 -19.1 8.5 -25.7 c 2.3 -3.5 0.3 10.8 3 19 c 3 9 9 3 11 -5 c 4 -10 5.8 -31.8 5.8 -37.9 s 0.3 -15.9 0.3 -15.9 s 0 0 0.1 -0.1 l -29.4 -8.4 C 27.5 84.6 24.7 91.3 22.9 96.6 Z"></path>
<path class="segm-lad" id="a2c-13" POINTER-EVENTS="auto" d="M 128.7 70.1 c -3.5 -13.9 -12.3 -28.5 -18.6 -37.3 c -0.6 -0.9 -1.4 -1.9 -2.2 -2.8 H 81.8 v 20.2 c 2.3 -0.1 3.7 -1.2 3.7 -1.2 s 0.3 3.3 3.3 5.3 c 3 2 4.3 0 4.3 0 s 1.8 3.8 2.8 5 c 1 1.3 1.8 4.5 3 8.8 c 1.3 4.3 4.9 13.6 5 16.9 c 0 0.2 0 0.3 0 0.5 l 26.8 -6.9 C 130.1 75.5 129.4 72.7 128.7 70.1 Z"></path>
<path class="segm-lad" id="a2c-7" POINTER-EVENTS="auto" d="M 138.1 119.5 c -1 -10.3 -4.2 -27.4 -7.3 -40.9 l -26.8 6.9 c 0.3 6 2.5 4.8 2.5 4.8 s 1.3 10.8 1.3 18.6 c 0 7.8 -2.3 22.4 -0.8 29.7 c 0.7 3.4 2.5 8.3 4.4 13.5 l 28.6 -7.4 C 139.3 136.2 138.8 126.6 138.1 119.5 Z"></path>
<path class="segm-lad" id="a2c-1" POINTER-EVENTS="auto" d="M 141.6 160.8 c -0.7 -3.4 -1.2 -9.4 -1.7 -16.1 l -28.6 7.4 c 2.1 5.8 4.3 11.8 4.9 16.3 c 1.3 8.3 2.8 14.6 2 22.7 c -0.4 4.4 0.2 9.7 -0.8 13.5 c -0.8 3.1 -4.6 13.2 2 16 c 7 3 16.8 -10.8 19 -14 c 4 -6 3.7 -8.2 6 -17 C 146.8 180.7 143.1 168.6 141.6 160.8 Z"></path>
</NodeList>
Given the NodeList in your scenario already exists, it's hard to see how it can be done without iterations.
However, an alternative could be to create the NodeList according to the desired id, in the first place.
For example:
let getRelatedElements = id =>
document.querySelectorAll('[id$="-'+id.replace(/\D/g, '')+'"]:not(#'+id+')');
This uses a combination of an attribute-selector to select elements with the same numerical suffix and a :not selector to ignore the element with the original id.

Bezier curve calculate control points on a SVG-Path

I'm trying to add a point into a SVG-Path at a certain position on the path.
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M 48 241 C 50 13 129 26 130 238 C 138 521 214 431 220 228 C 237 65 288 -18 316 240" stroke="black" fill="transparent"/>
</svg>​
Furthermore, I would like to add a point in the Path (curve), so that the path (curve) doesn't deform.
The point is e.g. "C x1 y1 x2 y2 210 331".
My question:.
How can I determine the controls x1 y1 x2 y2?
E.g. "C 100 100 100 500 210 331" is wrong, because the curve will be deformed.
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d= "M 48 241 C 50 13 129 26 130 238 C 100 100 100 500 210 331 C 210 331 210 331 220 228 C 237 65 288 -18 316 240" stroke="black" fill="transparent"/>
</svg>
In other words the point (x = 210, y = 331) is given. Wanted are controls "x1 y1 x2 y2".
See here for more explanation
(In order to add a graphic in “stackoverflow.com”, it is needed some points. But I haven’t enough points, therefore I inserted a link)
Thanks in advance.

Draw custom background shapes for tooltips in highcharts

I have been asked to make use of highcharts/stackcharts for a project I’m working on. Our Artist designed a look and feel that matches other components that we are making use of. I need to change the shape and size of the tooltips and the handles on the navigator. Basicly I need to skin the charts.
I can’t use another charting library at this stage as we already committed to highchars but if this isn’t possible, then that would be a deal breaker for us.
The Stackcharts documentation states this:
handles: Object
Options for the handles for dragging the zoomed area. Available options are backgroundColor and borderColor.
This is not good enough :(
I also tried drawing a custom tooltip with this code:
tooltip: {
useHTML: true,
formatter: function () {
var st = '<div style="background-color:#ff8000"><svg version="1.1" width="55" height="55"><path d="m 27.7 3.9 C 13.5 3.9 1.9 15.4 1.9 29.6 C 1.9 43.8 13.5 55.3 27.7 55.3 C 41.9 55.3 53.4 43.8 53.4 29.6 C 53.4 15.4 41.9 3.9 27.7 3.9 Z M 21.8 14.8 C 22 14.7 22.2 14.8 22.3 14.8 C 23.8 15.3 24.2 18 23.2 20.9 C 22.3 23.9 20.4 25.9 19 25.5 C 17.5 25 17.2 22.3 18.1 19.3 C 18.9 16.7 20.5 14.9 21.8 14.8 Z M 29.7 14.9 C 31.6 14.9 33.9 17.1 35.2 20.3 C 36.8 23.9 36.5 27.5 34.6 28.4 C 32.7 29.2 29.8 26.9 28.3 23.2 C 26.7 19.6 27 16 28.9 15.1 C 29.2 15 29.5 15 29.7 14.9 Z M 49.3 28 L 48.6 29.4 C 44.2 37.2 38 43.8 31.3 46.3 C 27.9 47.5 24.5 47.7 21.1 46.5 C 17.8 45.2 14.6 42.6 11.7 38.2 L 11.2 37.3 L 12.2 37.4 C 31.3 39.8 38.2 33.4 47.9 28.7 L 49.3 28z" fill="#ffdd55" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="0"></path></svn></div>';
return st;
}
}
http://jsfiddle.net/pdDk4/
But the svg gets drawn into the border and it’s doesn’t seem like I can replace it without hacking it :(
I don’t want to do that.
I have investigated and goggle’d for hours without any success. Is there anyone who knows how I can accomplish this?
Please Sir, can I some morrr customisation?
In case when you set useHTML as true, then you can set background in CSS.
http://jsfiddle.net/pdDk4/5/
formatter: function () {
var st = '<div class="tooltip">'+this.y+'</div>';
return st;
}
CSS:
.tooltip {
width:200px;
height:200px;
background:url('http://aeseda.psu.edu/wp-content/themes/theme-mingle/assets/images/placeholder.jpg');
}
I advice to not use SVG in this way, because in IE<8 tooltip will not appear, because older browseres uses VML.
The important thing to point out is that I needed to draw a custom shape as a background. The correct solution is to use something like raphaeljs or something similar to draw the custom shapes.
For the sake of simplicity, I have updated the fiddle to reflect the solution I was after. It’s not that much different than my original code but I must have been intoxicated when first asked the question. Here is the update fiddle:
http://jsfiddle.net/pdDk4/
With this you can draw custom shapes as backgrounds to your tooltips. Remember, this won’t work in IE8 but you can use something like raphaeljs to convert the SVG shapes to VML.
formatter: function () {
var st = '<svg version="1.1" width="55" height="55"><path d="m 27.7 3.9 C 13.5 3.9 1.9 15.4 1.9 29.6 C 1.9 43.8 13.5 55.3 27.7 55.3 C 41.9 55.3 53.4 43.8 53.4 29.6 C 53.4 15.4 41.9 3.9 27.7 3.9 Z M 21.8 14.8 C 22 14.7 22.2 14.8 22.3 14.8 C 23.8 15.3 24.2 18 23.2 20.9 C 22.3 23.9 20.4 25.9 19 25.5 C 17.5 25 17.2 22.3 18.1 19.3 C 18.9 16.7 20.5 14.9 21.8 14.8 Z M 29.7 14.9 C 31.6 14.9 33.9 17.1 35.2 20.3 C 36.8 23.9 36.5 27.5 34.6 28.4 C 32.7 29.2 29.8 26.9 28.3 23.2 C 26.7 19.6 27 16 28.9 15.1 C 29.2 15 29.5 15 29.7 14.9 Z M 49.3 28 L 48.6 29.4 C 44.2 37.2 38 43.8 31.3 46.3 C 27.9 47.5 24.5 47.7 21.1 46.5 C 17.8 45.2 14.6 42.6 11.7 38.2 L 11.2 37.3 L 12.2 37.4 C 31.3 39.8 38.2 33.4 47.9 28.7 L 49.3 28z" fill="rgba(255, 150, 0, 0.8)" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="0"></path></svn><div style="position:absolute;left:10px;top:10px">this.y =' + this.y + '<div>';
return st;
}

Is there a way to merge two path elements (svg) using Javascript?

I have drawn two path lines using SVG and I've saved these elements into two variables in my javascript code: 'Line1', and 'Line2', and I need to merge the two lines into one single path element. Is there a way to do so?
Are your paths defined relatively (small letters) or absolutely (capitals)? If absolute, joining two paths is trivial, just append the values of the d attribute. If you have two paths like this:
<path id="Line1" d="M50,50
A30,30 0 0,1 35,20
L100,100"
style="stroke:#660000; fill:none;"/>
<path id="Line2" d="M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
Then this JavaScript code:
var Line1 = document.getElementById("Line1");
var Line2 = document.getElementById("Line2");
//Add paths together
Line1.setAttribute('d', Line1.getAttribute('d') + ' ' + Line2.getAttribute('d'));
//Remove unnecessary second path
Line2.parentNode.removeChild(Line2);
Will lead to you having a single path like this:
<path id="Line1" d="M50,50
A30,30 0 0,1 35,20
L100,100 M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
Here's a jsFiddle, it works in Firefox 4 (needs an HTML5 parser so you can have inline SVG).
If your paths are relative then you're going to have to add something between the appended paths so that the second one starts in the correct place.
Concatenate d attributes
Usually, you can just concatenate the pathdata d attribute of several <path> elements to get a combined path.
Unfortunately, you might encounter some »bad practices« using M or m as interchangeable commands.
Common misconceptions about M or m:
M (moveto) can be absolute or relative.
Unlike the z (closepath) command (lowercase/uppercase – doesn't matter).
Relative m commands can be used used for compound paths like e.g the inner "hole" of the letter "o" referring to the previous command's end coordinate.
In fact, every first m or M command uses absolute coordinates – since there are no preceding points.
However, the first M command can be uppercase or lowercase – doesn't matter
(blame the specs)
Exception: the lowercase m command introduces a row of implicit relative l lineto commands. (But you can/should also avoid this)
Example 1: paths starting with (unnecessary) relative m command
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p>Seperate paths</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 l 10 0 l 0 10 l -10 0z" />
<path id="path2" d="m 40 0 l 10 0 l 0 10 l -10 0z" />
<path id="path3" d="m 0 0 l 10 0 l 0 10 l -10 0z" />
</svg>
<p>Merged paths</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 l 10 0 l 0 10 l -10 0z
m 40 0 l 10 0 l 0 10 l -10 0z
m 0 0 l 10 0 l 0 10 l -10 0z
" />
</svg>
<p>Merged paths - fixed</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
M 20 0 l 10 0 l 0 10 l -10 0z
M 40 0 l 10 0 l 0 10 l -10 0z
M 0 0 l 10 0 l 0 10 l -10 0z
" />
</svg>
Fix: just replace each starting m with an absolute M
Example 2: m command for adjacent linetos
The exception are m commands followed by coordinates – used as a shorthand for succeeding l (relative linetos). (See also w3c specs.)
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p>Seperate paths</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 10 0 0 10 -10 0z" />
<path id="path2" d="m 40 0 10 0 0 10 -10 0z" />
<path id="path3" d="m 0 0 10 0 0 10 -10 0z" />
</svg>
<p>Merged paths</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 10 0 0 10 -10 0z
m 40 0 10 0 0 10 -10 0z
m 0 0 10 0 0 10 -10 0z
" />
</svg>
<p>Merged paths - fixed</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 10 0 0 10 -10 0z
M 40 0 l 10 0 0 10 -10 0z
M 0 0 l 10 0 0 10 -10 0z
" />
</svg>
Fix: insert l commands
<path d="m 20 0 10 0 0 10 -10 0z" />
equals
<path d="M 20 0 l 10 0 l 0 10 l -10 0z" />
or
<path d="M 20 0 l 10 0 0 10 -10 0z" />
Example 3: fix pseudo relative m commands via getPathData()
Currently still a draft and not natively supported by major browser.
However you can use Jarek Foksa's polyfill..
getPathData() will return an array of command objects and normalize
repeated commands like this:
[
{type: 'm', values:[20, 0] },
{type: 'l', values:[10, 0]},
{type: 'l', values:[0, 10]},
{type: 'l', values:[-10, 0]}
]
function concatSimple(){
let d1= path1.getAttribute('d')
let d2= path2.getAttribute('d')
let d3= path3.getAttribute('d')
pathConcat.setAttribute('d', d1+d2)
}
function concatPathData(){
let pathData1= fixFirstM(path1.getPathData());
let pathData2= fixFirstM(path2.getPathData());
let pathData3= fixFirstM(path3.getPathData());
let pathDataConcat = pathData1.concat(pathData2).concat(pathData3);
pathConcat.setPathData(pathDataConcat);
}
// change first m to absolute M
function fixFirstM(pathData){
pathData[0].type='M';
return pathData;
}
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p><button onclick="concatSimple()">concat d simple</button>
<button onclick="concatPathData()">concat d pathData</button>
</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 10 0 0 10 -10 0z" />
<path id="path2" d="m 40 0 10 0 0 10 -10 0z" />
<path id="path3" d="m 0 0 10 0 0 10 -10 0z" />
</svg>
<svg viewBox="0 0 50 10">
<path id="pathConcat" d="" />
</svg>
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill#1.0.4/path-data-polyfill.min.js"></script>
To fix the first relative m we can convert by changing the first command type
pathData[0].type='M';
Recommendation: only use relative m commands if they are actually relative:
if you need a shorthand for following l commands (like m 20 0 10 0 0 10 -10 0z)
for relative (subpath) starting points in compound paths – like the letter "o"
Actually merging shapes: removing overlapping shapes
If you need to merge shapes - paper.js has some powerful path operations like unite, subtract etc.
Explained here: "Merging two bezier-based shapes into one to create a new outline"

Categories

Resources