I want to change the embedded SVG fill color and use JavaScript to achieve them. but it print nothing in console when i want to access innerHtml of object tag.
My HTML code is-
<object type="image/svg+xml" data="imageedit_3_7291031266-2.svg" id="svg_content"></object>
and JavaScript code is -
var a = document.getElementById('svg_content');
console.log(a.innerHTML);
imageedit_3_7291031266-2.svg file code is-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="667px" height="700px" viewBox="0 0 6670 7000" preserveAspectRatio="xMidYMid meet">
<g id="layer101" fill="#3b3f60" stroke="none">
<path d="M3390 6629 c-19 -4 -41 -6 -48 -4 -7 3 -45 0 -85 -5 -40 -5 -252 -16 -472 -25 -564 -22 -759 -46 -884 -110 -92 -46 -107 -83 -86 -204 23 -125 45 -276 52 -356 3 -38 9 -74 13 -80 4 -5 10 -107 14 -225 6 -209 25 -493 67 -1045 22 -277 21 -449 -1 -750 -11 -136 -53 -520 -72 -640 l-12 -80 -7 60 c-4 42 -19 84 -47 140 -42 81 -89 227 -112 345 -7 36 -28 135 -47 220 -20 85 -37 175 -39 200 -8 86 -36 274 -44 296 -5 12 -14 75 -20 140 -6 66 -19 173 -30 239 -49 311 -60 437 -60 696 -1 140 -5 286 -10 324 -5 39 -12 93 -16 120 -3 28 -20 84 -36 125 -37 89 -47 197 -26 275 21 76 11 107 -37 123 -96 31 -385 19 -430 -18 -11 -9 -14 -45 -14 -153 -1 -157 -4 -174 -50 -264 -22 -45 -31 -76 -31 -112 0 -28 -9 -90 -21 -138 -19 -79 -20 -104 -13 -248 8 -185 8 -199 -7 -565 -6 -151 -8 -369 -5 -485 4 -115 9 -295 12 -400 6 -230 17 -349 49 -520 13 -71 29 -168 35 -215 11 -86 26 -162 99 -500 65 -303 100 -450 126 -535 13 -44 54 -196 90 -337 85 -335 143 -493 214 -582 17 -21 28 -43 24 -49 -3 -5 -1 -7 4 -4 6 4 19 -3 29 -14 32 -36 123 -93 249 -158 66 -34 156 -82 200 -107 44 -26 133 -73 198 -105 103 -52 117 -62 117 -85 0 -19 8 -28 34 -39 66 -28 155 -96 260 -198 87 -85 123 -113 191 -147 50 -25 93 -40 105 -37 10 3 39 -2 62 -10 33 -11 64 -13 133 -7 116 9 115 9 150 23 53 21 59 22 128 31 59 7 83 5 163 -15 52 -14 149 -31 216 -40 67 -9 125 -18 128 -20 13 -8 171 23 188 37 9 8 39 24 66 34 64 25 134 89 171 155 28 52 34 57 145 111 63 32 136 67 162 77 49 20 68 43 61 70 -3 12 39 41 169 116 95 54 205 120 243 146 39 26 102 64 140 85 83 45 165 119 211 190 106 164 274 878 425 1799 6 33 19 105 30 160 19 92 30 171 60 435 24 213 36 554 32 955 -5 587 -36 883 -108 1047 -40 91 -42 108 -15 133 26 24 25 65 -2 112 -20 33 -23 52 -23 153 0 63 4 145 9 182 l8 67 -43 12 c-63 18 -332 17 -384 -2 l-40 -14 3 -140 c4 -156 -3 -186 -59 -250 -37 -42 -40 -72 -9 -115 21 -29 22 -35 11 -90 -7 -33 -21 -86 -32 -117 -14 -39 -23 -102 -29 -193 -41 -660 -89 -1213 -116 -1360 -8 -41 -14 -90 -14 -109 0 -18 -7 -59 -15 -90 -8 -31 -15 -74 -16 -96 -1 -22 -13 -67 -27 -99 -13 -34 -28 -99 -34 -150 -10 -96 -32 -184 -79 -327 -16 -48 -29 -97 -29 -110 0 -43 -11 -10 -25 72 -19 122 -27 301 -17 401 4 49 4 95 -1 103 -5 9 -4 15 3 15 6 0 10 28 10 73 0 80 -8 120 -21 111 -5 -3 -6 9 -2 27 3 17 1 34 -4 38 -6 3 -13 26 -17 51 -10 76 -23 129 -33 142 -5 7 -6 24 -2 38 5 20 7 21 8 6 1 -14 4 -17 11 -10 16 16 30 198 36 454 2 129 9 257 15 284 6 33 6 53 -1 61 -7 9 -7 14 -1 17 6 2 12 68 15 163 5 194 23 453 36 515 5 25 6 95 3 155 -4 82 -1 125 10 170 9 33 20 95 26 138 6 43 18 91 26 107 20 39 19 85 -2 111 -71 86 -446 165 -873 184 -74 3 -207 10 -295 16 -88 5 -199 11 -247 12 -47 1 -84 5 -81 10 2 4 3 7 1 6 -2 -1 -19 -5 -38 -10z"/>
</g>
<g id="layer102" fill="#d4d5d9" stroke="none">
<path d="M3390 6629 c-19 -4 -41 -6 -48 -4 -7 3 -45 0 -85 -5 -40 -5 -252 -16 -472 -25 -564 -22 -759 -46 -884 -110 -92 -46 -107 -83 -86 -204 23 -125 45 -276 52 -356 3 -38 9 -74 13 -80 4 -5 11 -113 15 -240 4 -126 13 -300 21 -385 12 -143 13 -147 10 -47 -3 74 0 107 8 107 6 0 5 4 -3 9 -13 8 -13 12 -1 26 12 14 12 18 -1 26 -9 5 -9 9 -2 9 7 0 10 14 8 39 -2 21 3 51 11 66 9 17 11 31 5 34 -11 7 -8 101 3 120 4 6 2 18 -4 26 -8 9 -8 20 -2 31 6 11 7 27 1 41 -6 15 -5 23 2 23 7 0 9 11 5 28 -4 18 -3 22 3 12 5 -8 14 -69 20 -135 18 -181 22 -209 32 -219 12 -13 11 -29 -1 -21 -14 9 -12 -8 3 -24 10 -11 10 -13 0 -7 -7 4 -13 2 -13 -3 0 -6 7 -11 15 -11 18 0 18 -1 1 -36 -8 -15 -12 -32 -9 -38 4 -5 10 -1 14 10 7 17 8 16 9 -6 2 -14 2 -30 1 -37 -1 -6 3 -14 9 -18 6 -4 10 7 11 27 0 30 1 31 10 10 5 -13 14 -20 20 -17 6 4 8 13 5 21 -3 8 -1 14 3 14 5 0 15 -15 22 -32 7 -18 15 -37 17 -42 3 -5 -2 -7 -11 -3 -9 3 -18 0 -21 -9 -3 -8 -1 -14 4 -14 6 0 10 -4 10 -10 0 -5 -9 -10 -20 -10 -11 0 -20 -7 -20 -16 0 -8 5 -12 10 -9 16 10 12 -7 -5 -19 -16 -12 -10 -60 7 -50 5 3 8 0 7 -7 -4 -21 12 -130 22 -148 8 -16 33 -72 62 -141 16 -41 178 -340 197 -365 4 -5 31 -57 60 -115 30 -58 56 -107 60 -110 4 -3 4 -25 1 -50 -4 -28 -9 -40 -14 -32 -5 6 -6 12 -3 12 3 0 -1 12 -9 27 -8 15 -11 31 -8 36 3 5 -7 20 -22 33 -16 13 -25 24 -22 24 12 0 -34 94 -53 107 -15 11 -48 65 -56 93 -10 35 -18 50 -30 54 -8 3 -14 12 -14 20 0 9 -10 25 -23 36 -12 12 -22 27 -22 33 0 7 -7 12 -15 12 -8 0 -21 6 -29 13 -12 12 -12 15 0 23 11 7 9 10 -8 15 -13 4 -23 10 -23 14 0 5 -8 11 -17 13 -14 4 -12 5 5 6 12 0 22 3 22 6 0 17 -33 66 -52 76 -19 10 -20 9 -15 -10 4 -18 2 -21 -14 -16 -16 5 -19 1 -19 -24 0 -17 5 -31 10 -31 6 0 10 -5 10 -11 0 -6 -7 -9 -15 -5 -8 3 -15 1 -15 -4 0 -6 5 -10 10 -10 6 0 10 -5 10 -11 0 -5 -5 -7 -11 -3 -6 3 -15 0 -20 -7 -13 -21 -11 -29 6 -23 11 5 15 -1 15 -20 0 -19 -5 -26 -20 -26 -12 0 -20 -7 -21 -17 -1 -35 -10 -108 -16 -133 -6 -19 -8 -13 -13 30 -3 30 -6 -62 -6 -205 -2 -266 -11 -417 -39 -653 -9 -74 -15 -141 -13 -150 2 -10 12 54 23 141 l19 157 32 0 c31 0 53 23 33 35 -17 11 3 27 27 21 13 -4 24 -2 24 3 0 5 -10 11 -22 13 -12 2 -23 9 -26 17 -3 10 2 12 22 7 25 -6 32 1 27 27 -1 5 8 5 20 2 l21 -7 -21 21 c-17 17 -19 25 -11 41 14 26 21 25 56 -5 28 -24 28 -25 7 -25 -39 0 -25 -17 20 -24 40 -7 41 -8 22 -22 -19 -14 -17 -15 20 -11 27 3 39 9 37 18 -3 12 -1 12 10 1 11 -11 9 -16 -11 -31 -13 -10 -21 -23 -17 -30 5 -7 -1 -11 -13 -11 -12 0 -21 -4 -21 -10 0 -5 7 -6 17 -3 11 4 14 3 9 -6 -5 -8 -18 -10 -32 -7 -14 4 -24 2 -24 -4 0 -5 6 -10 13 -10 8 0 7 -3 -3 -10 -9 -6 -17 -5 -23 3 -6 8 -7 8 -4 -3 2 -8 19 -18 38 -22 29 -6 28 -7 -11 -4 -29 2 -50 -2 -58 -11 -11 -11 -10 -14 2 -19 9 -3 16 -15 16 -26 0 -15 -5 -19 -20 -15 -13 3 -20 0 -20 -9 0 -8 -5 -14 -11 -14 -6 0 -8 -8 -4 -20 7 -23 -10 -60 -29 -60 -8 0 -16 -10 -19 -22 -4 -12 -9 -19 -13 -15 -10 10 -33 -24 -34 -48 0 -15 7 -21 28 -23 l27 -1 -25 15 -25 15 25 -5 c14 -3 28 -6 33 -6 4 0 7 -9 7 -20 0 -14 7 -20 24 -20 13 0 27 -7 30 -16 9 -24 8 -26 -14 -19 -11 3 -20 2 -20 -3 0 -5 10 -12 23 -16 32 -8 35 -8 40 12 4 14 5 13 6 -4 0 -12 11 -26 24 -32 20 -10 18 -11 -20 -11 -23 -1 -44 3 -48 8 -3 5 -23 8 -45 6 -26 -2 -40 0 -40 8 0 7 -4 6 -9 -3 -13 -20 -3 -32 20 -25 11 4 33 1 49 -6 l29 -13 -26 -17 c-15 -10 -21 -19 -14 -23 6 -4 11 -1 12 6 0 7 4 4 8 -7 10 -25 -11 -35 -54 -27 l-30 5 19 -21 c11 -12 25 -22 33 -22 7 0 13 -7 13 -15 0 -15 -23 -11 -47 8 -7 5 -13 6 -13 1 0 -5 -5 -2 -10 6 -8 13 -10 12 -10 -2 0 -10 -6 -18 -13 -18 -11 0 -22 -18 -44 -75 -3 -5 0 -3 6 5 9 12 11 10 11 -12 0 -22 5 -28 21 -28 18 0 19 -2 9 -15 -9 -11 -10 -15 -1 -15 19 0 43 28 36 42 -3 7 2 3 11 -9 9 -13 24 -23 34 -23 9 0 27 -9 40 -20 18 -16 20 -20 7 -20 -10 0 -17 -6 -18 -12 0 -7 -4 -4 -9 7 -8 19 -9 19 -9 -3 -1 -18 3 -22 18 -17 21 6 71 -10 71 -24 0 -6 -11 -6 -30 1 -22 7 -34 7 -45 -2 -10 -9 -19 -9 -36 0 -19 11 -21 10 -16 -4 8 -21 -7 -21 -29 1 -16 16 -16 16 -10 -4 4 -13 1 -25 -11 -34 -11 -9 -14 -10 -9 -1 10 17 -9 15 -24 -2 -6 -8 -18 -12 -26 -9 -21 8 -17 -1 15 -36 19 -20 35 -29 45 -25 9 3 16 2 16 -3 0 -6 11 -15 25 -21 35 -16 31 -38 -7 -47 -30 -6 -31 -7 -12 -15 36 -14 42 -34 8 -26 l-29 6 30 -25 c23 -19 26 -25 13 -25 -10 0 -18 5 -18 10 0 6 -9 10 -20 10 -30 0 -24 -15 15 -36 40 -21 43 -29 15 -37 -13 -3 -20 0 -20 9 0 21 -43 35 -53 18 -5 -8 -12 -12 -18 -9 -5 4 -9 1 -9 -6 0 -7 -3 -9 -7 -6 -3 4 2 17 13 29 10 12 14 18 7 15 -6 -4 -13 -1 -16 5 -2 7 -9 -3 -14 -22 -8 -28 -6 -37 6 -47 14 -11 14 -12 -1 -13 -19 0 -22 -18 -11 -58 3 -14 9 -19 13 -13 4 8 13 5 25 -9 18 -20 18 -20 -19 -20 -30 0 -38 -5 -48 -27 -6 -16 -11 -45 -12 -65 0 -21 -4 -38 -7 -38 -7 0 -22 -40 -33 -93 -11 -46 -29 -20 -22 32 l6 46 -17 -45 c-12 -32 -16 -79 -16 -165 0 -134 17 -214 77 -360 45 -111 101 -193 240 -352 107 -122 144 -154 326 -287 12 -9 13 -8 4 4 -13 18 -14 50 -1 50 5 0 7 5 5 12 -5 13 35 58 50 58 4 0 27 -9 50 -20 22 -11 45 -20 50 -20 15 0 22 -27 22 -83 0 -52 13 -123 24 -134 3 -3 12 0 21 7 11 9 15 33 15 91 0 45 5 81 11 85 6 3 9 14 6 24 -3 13 3 20 22 24 22 5 91 81 91 100 0 3 10 16 23 29 12 13 38 44 57 70 19 25 41 46 48 47 6 0 12 11 12 25 0 19 5 25 23 25 15 0 18 3 9 8 -9 6 -6 12 11 21 12 6 36 33 52 59 16 26 46 68 67 93 21 26 38 52 38 58 0 6 5 11 10 11 6 0 10 10 10 23 0 13 4 27 9 32 5 6 14 27 21 48 7 21 14 37 16 34 4 -4 -50 -185 -66 -222 -63 -148 -140 -277 -199 -337 -20 -21 -47 -57 -59 -82 -23 -43 -23 -45 -5 -63 32 -32 19 -161 -27 -267 -11 -26 -20 -51 -20 -56 0 -13 39 -20 220 -36 131 -11 242 -14 445 -9 356 7 391 10 391 36 0 10 -3 19 -7 19 -7 0 -20 49 -24 90 -3 29 -63 198 -75 210 -8 8 -28 43 -47 80 -9 19 -23 39 -30 43 -7 4 -13 14 -13 21 0 7 -15 33 -32 57 -42 57 -58 85 -58 102 0 8 -13 25 -28 38 -15 13 -41 46 -56 72 -15 26 -38 52 -50 57 -13 5 -26 20 -30 34 -8 33 -103 130 -129 131 -12 1 -22 -6 -25 -17 -4 -15 -7 -17 -13 -6 -7 10 -9 9 -9 -4 0 -9 -5 -20 -12 -24 -8 -5 -9 -2 -4 12 47 123 119 380 122 438 4 75 13 93 41 81 16 -8 16 -9 -4 -12 -20 -4 -23 -11 -23 -48 0 -42 11 -57 38 -48 6 3 12 12 13 21 1 16 23 -68 33 -124 3 -13 8 -28 11 -34 4 -6 8 -26 11 -44 10 -85 117 -342 210 -508 18 -32 50 -91 70 -130 43 -82 86 -151 119 -188 13 -14 26 -42 29 -64 9 -46 14 -42 38 26 18 52 61 108 83 108 7 0 20 -9 30 -20 10 -11 50 -37 88 -58 64 -35 68 -39 63 -65 -8 -39 10 -73 30 -56 8 6 14 16 14 21 0 13 57 66 89 83 36 18 187 185 246 270 26 39 54 77 61 85 25 31 93 178 118 258 67 215 88 531 52 792 -10 69 -16 168 -15 220 2 85 -18 259 -39 345 -11 42 -4 75 16 75 14 0 13 2 -2 13 -17 13 -17 15 -2 45 9 18 16 33 16 34 -1 2 3 14 8 28 9 24 10 23 20 -20 l11 -45 -4 45 c-12 123 -15 264 -8 342 5 49 5 95 0 103 -5 9 -4 15 3 15 6 0 10 28 10 73 0 80 -8 120 -21 111 -5 -3 -6 9 -2 27 3 17 1 34 -4 38 -6 3 -13 26 -17 51 -10 76 -23 129 -33 142 -5 7 -6 24 -2 38 5 20 7 21 8 6 1 -14 4 -17 11 -10 16 16 30 198 36 454 2 129 9 257 15 284 6 33 6 53 -1 61 -7 9 -7 14 -1 17 6 2 12 68 15 163 5 194 23 453 36 515 5 25 6 95 3 155 -4 82 -1 125 10 170 9 33 20 95 26 138 6 43 18 91 26 107 20 39 19 85 -2 111 -71 86 -446 165 -873 184 -74 3 -207 10 -295 16 -88 5 -199 11 -247 12 -47 1 -84 5 -81 10 2 4 3 7 1 6 -2 -1 -19 -5 -38 -10z m7 -81 c8 -36 9 -85 4 -153 -4 -55 -7 -967 -5 -2027 3 -1506 1 -1928 -9 -1928 -9 0 -12 383 -14 1733 -1 952 -4 1795 -6 1872 -2 77 0 228 5 335 8 142 7 195 -1 198 -15 5 -14 22 2 22 7 0 18 -23 24 -52z m-1507 -137 c0 -10 -3 -21 -7 -25 -5 -4 -9 -20 -9 -34 -1 -15 -2 -33 -3 -39 0 -7 -8 -13 -18 -13 -9 0 -13 3 -10 6 4 4 -1 19 -10 34 -10 18 -13 34 -8 46 5 11 9 22 10 27 2 4 3 8 4 10 0 1 12 3 26 3 18 1 25 -3 25 -15z m1391 -27 c-9 -28 -9 -29 -10 -3 -1 14 2 29 6 32 11 12 13 2 4 -29z m-4 -126 c-2 -18 -4 -4 -4 32 0 36 2 50 4 33 2 -18 2 -48 0 -65z m-1357 53 c0 -12 -20 -25 -27 -18 -7 7 6 27 18 27 5 0 9 -4 9 -9z m24 -67 c5 -13 1 -15 -20 -10 -19 5 -30 2 -41 -11 -10 -13 -13 -14 -10 -3 3 13 42 39 58 40 4 0 10 -7 13 -16z m-9 -44 c-11 -5 -29 -9 -40 -9 l-20 0 20 9 c11 5 29 9 40 9 l20 0 -20 -9z m-28 -43 c4 -6 -2 -8 -15 -5 -14 4 -22 1 -25 -11 -3 -9 -5 -4 -6 11 -1 22 3 25 19 21 11 -3 23 -10 27 -16z m1368 -32 c-3 -26 -9 -45 -12 -42 -2 3 -1 26 2 52 4 25 10 44 12 41 3 -3 2 -26 -2 -51z m-1365 -10 c0 -6 5 -16 12 -23 14 -14 21 -52 10 -52 -4 0 -13 5 -20 12 -9 9 -12 8 -12 -4 0 -20 53 -41 68 -26 5 5 36 11 70 12 l60 2 -72 -31 c-108 -47 -120 -56 -66 -49 l45 6 -25 -18 c-13 -10 -31 -19 -40 -20 -8 -1 -23 -5 -32 -9 -11 -4 -18 -3 -18 4 0 6 5 11 10 11 6 0 10 7 10 15 0 8 -7 15 -15 15 -10 0 -15 10 -15 29 0 17 -4 32 -10 36 -5 3 -7 12 -4 19 3 7 6 26 8 42 2 16 4 32 5 35 2 11 31 6 31 -6z m1378 -455 c2 -129 1 -232 -1 -230 -2 3 -6 140 -9 305 -3 165 -2 269 1 230 3 -38 7 -176 9 -305z m-1318 227 c0 -18 -5 -23 -22 -22 -12 1 -23 6 -25 11 -3 8 5 14 45 33 1 0 2 -9 2 -22z m-2 -60 c-7 -14 -13 -17 -16 -9 -2 6 -10 12 -18 12 -28 0 -13 17 16 18 28 1 29 -1 18 -21z m73 -274 c-9 -15 -10 -12 -10 17 0 29 1 32 10 18 7 -12 7 -24 0 -35z m25 -72 c0 -10 -6 -18 -13 -18 -7 0 -13 11 -13 23 0 15 5 22 13 18 7 -2 13 -13 13 -23z m43 -2 c-22 -14 -33 -10 -19 6 7 8 17 12 22 9 6 -4 5 -10 -3 -15z m-25 -53 c9 3 16 2 16 -4 0 -16 -28 -22 -38 -9 -16 21 -24 43 -9 24 9 -10 21 -15 31 -11z m-24 -73 c-1 -35 -3 -44 -10 -32 -11 18 -9 79 3 79 4 0 7 -21 7 -47z m1227 -170 c-3 -10 -5 -2 -5 17 0 19 2 27 5 18 2 -10 2 -26 0 -35z m0 -80 c-3 -10 -5 -2 -5 17 0 19 2 27 5 18 2 -10 2 -26 0 -35z m0 -335 c-2 -13 -4 -5 -4 17 -1 22 1 32 4 23 2 -10 2 -28 0 -40z m1228 -190 c29 -64 61 -158 50 -147 -12 12 -95 189 -95 203 0 30 11 16 45 -56z m-2272 -62 c4 -10 0 -12 -14 -9 -10 3 -16 9 -13 14 8 13 21 11 27 -5z m1044 -163 c-2 -16 -4 -5 -4 22 0 28 2 40 4 28 2 -13 2 -35 0 -50z m-1261 -17 c3 -23 -20 -15 -24 8 -3 11 1 17 9 14 7 -2 13 -12 15 -22z m242 -880 c3 -3 2 -9 -2 -13 -4 -4 -11 -1 -16 7 -6 9 -10 10 -10 3 0 -6 5 -15 10 -18 6 -3 10 -14 10 -23 -1 -14 -5 -12 -21 7 l-20 25 4 -25 c2 -13 2 -18 0 -11 -3 6 -8 12 -13 12 -11 0 -21 30 -14 41 6 10 61 6 72 -5z m-78 -21 c0 -3 -9 -14 -20 -25 -13 -13 -20 -15 -20 -7 0 7 5 18 12 25 12 12 28 16 28 7z m-70 -25 c8 -5 11 -12 8 -15 -4 -4 -17 0 -30 9 -24 17 -5 23 22 6z m89 -67 c-1 -23 -2 -24 -6 -6 -2 12 -12 24 -21 26 -12 3 -10 5 6 6 18 1 22 -4 21 -26z m8 -105 c-3 -20 0 -41 6 -47 15 -15 -1 -14 -17 1 -7 7 -11 20 -8 30 2 10 -1 18 -6 18 -6 0 -16 8 -21 19 -9 16 -6 18 20 17 30 -1 31 -3 26 -38z m-117 -386 c0 -10 -4 -11 -12 -5 -7 6 -20 13 -28 16 -8 3 -3 5 13 4 16 -1 27 -7 27 -15z m476 -234 c-4 -62 -8 -129 -10 -148 -2 -19 -7 -134 -11 -255 -4 -121 -9 -223 -12 -227 -9 -15 -24 -8 -19 10 3 9 8 116 11 237 3 121 10 252 16 290 5 39 11 99 12 135 4 71 4 70 14 70 3 0 3 -51 -1 -112z m1619 -66 c1 -77 9 -187 16 -245 9 -79 10 -112 1 -129 -9 -20 -11 -15 -13 37 -1 33 -3 71 -5 85 -2 14 -5 107 -8 208 -3 101 -8 188 -12 195 -5 9 -4 9 5 1 8 -8 13 -58 16 -152z m-2215 9 c0 -12 -37 -29 -49 -22 -21 13 -2 38 25 33 13 -2 24 -7 24 -11z m1349 -231 c14 -66 8 -78 -8 -15 -6 25 -18 48 -26 51 -10 4 -15 20 -15 43 l0 36 19 -31 c10 -17 24 -54 30 -84z m-789 -385 c0 -8 -4 -15 -10 -15 -5 0 -10 7 -10 15 0 8 5 15 10 15 6 0 10 -7 10 -15z m910 -875 c0 -5 -9 -6 -20 -3 -15 4 -19 2 -14 -10 3 -9 1 -24 -5 -34 -9 -15 -10 -13 -5 11 5 21 4 27 -5 22 -6 -4 -11 -3 -11 3 0 5 -10 11 -22 13 -13 2 1 4 30 5 28 0 52 -3 52 -7z"/>
<path d="M1886 6084 c-4 -9 -4 -19 -1 -22 3 -3 5 0 5 6 0 7 7 9 18 5 15 -6 15 -5 3 10 -17 21 -17 21 -25 1z"/>
</g>
</svg>
put the SVG directly inside your code and do js code
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="667px"
height="700px" viewBox="0 0 6670 7000" preserveAspectRatio="xMidYMid meet">
<g id="layer101" fill="#3b3f60" stroke="none">
<path d="M3390z"/>
</g>
<g id="layer102" fill="#d4d5d9" stroke="none">
<path d="M3390 6"/>
<path d="M1886 60 1z"/>
</g>
</svg>
<script>
document.getElementById('layer101').style.fill = "#000"
document.getElementById('layer102').style.fill = "#000"
</script>
First of all, If you want to change fill, You should include your SVG directly in DOM (object\img tag won't work for those cases).
You can do it manually by using svg tag instead of object
You can find some additional information here:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
Then you have two options: change fill color directly in svg code, or apply some css styles
svg g { fill: #d4d5d9 }
or you can use javascript to replace your object tag with an svg (simplified example)
document.querySelectorAll('object').forEach((el) => {
var url = el.getAttribute('data');
fetch(url).then((res) => {
var svgWrapper = document.createElement('div');
svgWrapper.innerHTML = res;
el.parentNode.replaceChild(svgWrapper, el);
});
});
<object type="image/svg+xml" data="imageedit_3_7291031266-2.svg" id="svg_content"></object>
Related
I have a svg file and I would like to know if it is possible to transform it automatically into html code where a <g> is included in a <div>.
For example :
This code
<svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<g>
<!-- background -->
<rect class="wufoo-background" fill="#D03E27" width="400" height="400" />
</g>
<g>
<!-- logo letters -->
<path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
<path class="wufoo-letter" fill="#F4F4F4" d="..." />
</g>
<!-- dinosaur -->
<g class="trex">
<path ... />
<path ... />
</g>
</svg>
becomes this
<svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<div>
<g>
<!-- background -->
<rect class="wufoo-background" fill="#D03E27" width="400" height="400" />
</g>
</div>
<div>
<g>
<!-- logo letters -->
<path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
<path class="wufoo-letter" fill="#F4F4F4" d="..." />
</g>
</div>
<div>
<!-- dinosaur -->
<g class="trex">
<path ... />
<path ... />
</g>
</div>
</svg>
div is not a valid child element of svg, and svg child elements (e.g. g, path, etc) are not valid HTML elements. While you might be able to force-inject certain tags, it won't do any good for you.
If you're looking to do some custom styling or/and interaction per different parts of SVG, you'll need to do some manual work to separate out them into relevant parts and use them as inline within your HTML.
You could do that but the result would be neither valid html nor a valid svg. What you can do is inlining several svgs into a html page.
Like this:
<div>
<svg version="1.1" class="wufoo-ad" id="wufoo-ad-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 40" enable-background="new 0 0 400 40" xml:space="preserve">
<g>
<!-- background -->
<rect class="wufoo-background" fill="#D03E27" width="400" height="40" />
</g>
</svg>
</div>
<div>
<svg version="1.1" class="wufoo-ad" id="wufoo-ad-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 120" enable-background="new 0 0 400 120" xml:space="preserve">
<g stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none">
<!-- logo letters -->
<path transform="translate(10,10)" class="wufoo-letter" fill="#F4F4F4" d="M 39.4 62.6 L 39.4 38.4 L 8.2 38.4 L 8.2 65.6 A 13.363 13.363 0 0 1 7.786 65.73 Q 7.304 65.874 6.644 66.039 A 42.972 42.972 0 0 1 6.6 66.05 Q 5.6 66.3 4.4 66.3 A 7.625 7.625 0 0 1 2.753 66.139 Q 0 65.527 0 62.6 L 0 5.2 A 5.41 5.41 0 0 1 0.325 5.084 Q 0.685 4.966 1.212 4.833 A 25.952 25.952 0 0 1 1.55 4.75 A 9.267 9.267 0 0 1 3.137 4.52 A 10.939 10.939 0 0 1 3.8 4.5 A 7.625 7.625 0 0 1 5.447 4.662 Q 8.2 5.273 8.2 8.2 L 8.2 31.6 L 39.4 31.6 L 39.4 5.2 A 5.41 5.41 0 0 1 39.725 5.084 Q 40.085 4.966 40.612 4.833 A 25.952 25.952 0 0 1 40.95 4.75 A 9.267 9.267 0 0 1 42.537 4.52 A 10.939 10.939 0 0 1 43.2 4.5 A 7.625 7.625 0 0 1 44.847 4.662 Q 47.6 5.273 47.6 8.2 L 47.6 65.6 A 13.363 13.363 0 0 1 47.186 65.73 Q 46.704 65.874 46.044 66.039 A 42.972 42.972 0 0 1 46 66.05 Q 45 66.3 43.8 66.3 A 7.625 7.625 0 0 1 42.153 66.139 Q 39.4 65.527 39.4 62.6 Z M 72.5 22.8 L 72.5 65.6 A 5.938 5.938 0 0 1 72.179 65.717 Q 71.719 65.871 71 66.05 Q 70 66.3 68.8 66.3 A 7.506 7.506 0 0 1 67.204 66.146 Q 64.5 65.555 64.5 62.7 L 64.5 19.8 A 5.41 5.41 0 0 1 64.825 19.684 Q 65.185 19.566 65.712 19.433 A 25.952 25.952 0 0 1 66.05 19.35 A 9.267 9.267 0 0 1 67.637 19.12 A 10.939 10.939 0 0 1 68.3 19.1 Q 71.912 19.1 72.418 21.837 A 5.307 5.307 0 0 1 72.5 22.8 Z M 63.752 2.857 A 5.009 5.009 0 0 0 63.3 5 A 6.039 6.039 0 0 0 63.3 5.066 A 4.819 4.819 0 0 0 64.75 8.55 A 4.758 4.758 0 0 0 66.741 9.752 A 5.947 5.947 0 0 0 68.5 10 A 6.537 6.537 0 0 0 69.364 9.945 A 4.677 4.677 0 0 0 72.2 8.55 Q 73.6 7.1 73.6 5 Q 73.6 2.9 72.2 1.45 A 4.556 4.556 0 0 0 70.16 0.222 A 5.926 5.926 0 0 0 68.5 0 A 6.685 6.685 0 0 0 67.768 0.039 A 4.891 4.891 0 0 0 64.75 1.45 A 4.933 4.933 0 0 0 63.752 2.857 Z" />
<path transform="translate(100,10)" class="wufoo-letter" fill="#F4F4F4" d="M 54.5 69.1 L 45.9 69.1 L 45.9 37.7 L 8.6 37.7 L 8.6 69.1 L 0 69.1 L 0 0 L 8.6 0 L 8.6 30.4 L 45.9 30.4 L 45.9 0 L 54.5 0 L 54.5 69.1 Z M 93.962 22.908 A 28.25 28.25 0 0 0 87.9 22.3 A 27.977 27.977 0 0 0 84.157 22.542 A 21.548 21.548 0 0 0 78.8 23.95 A 26.073 26.073 0 0 0 78.185 24.213 Q 74.62 25.791 72.5 28.05 A 16.907 16.907 0 0 0 71.2 29.626 Q 70.377 30.747 69.589 32.148 A 37.623 37.623 0 0 0 68.15 35 A 19.011 19.011 0 0 0 67.583 36.389 Q 66.1 40.471 66.1 46 Q 66.1 57.1 71.1 63.7 A 14.968 14.968 0 0 0 74.763 67.149 Q 79.499 70.3 87.1 70.3 A 35.193 35.193 0 0 0 87.461 70.298 Q 90.158 70.27 92.53 69.828 A 21.005 21.005 0 0 0 98.1 68 Q 102.7 65.7 105 62 Q 109.2 55.2 109.2 47.2 A 46.054 46.054 0 0 0 109.163 45.344 Q 109.004 41.389 108.153 38.003 A 24.798 24.798 0 0 0 104.1 29.2 A 15.539 15.539 0 0 0 100.697 25.821 Q 97.852 23.763 93.962 22.908 Z M 87.9 28.8 A 14.237 14.237 0 0 0 84.62 29.161 A 10.968 10.968 0 0 0 81.35 30.5 A 11.041 11.041 0 0 0 78.551 32.925 A 10.01 10.01 0 0 0 77.3 34.9 Q 74.9 40 74.9 45.8 A 38.377 38.377 0 0 0 75.377 52.145 Q 77.274 63.403 86.724 63.786 A 16.668 16.668 0 0 0 87.4 63.8 A 14.181 14.181 0 0 0 90.566 63.463 A 10.667 10.667 0 0 0 93.9 62.1 Q 96.6 60.4 98 57.7 Q 100.4 52.7 100.4 46.8 A 38.377 38.377 0 0 0 99.923 40.455 Q 98.026 29.197 88.576 28.814 A 16.668 16.668 0 0 0 87.9 28.8 Z" />
</g>
</svg>
</div>
<div>
<svg version="1.1" class="wufoo-ad" id="wufoo-ad-3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<!-- dinosaur -->
<g class="trex" transform="translate(100.000000,0.000000) scale(0.0100000,-0.0100000) translate(-1055.000000,-10080.000000)"
fill="#000000" stroke="none">
<path d="M1055 10080 c-147 -31 -402 -180 -444 -259 -9 -16 -17 -81 -23 -175
l-8 -149 45 -48 c25 -26 45 -51 45 -54 0 -3 -11 -23 -25 -43 -32 -47 -32 -69
2 -104 30 -31 67 -36 97 -13 26 20 36 19 36 -4 0 -10 7 -24 15 -31 9 -8 12
-22 8 -41 -7 -37 19 -69 58 -69 26 0 27 -2 22 -33 -6 -40 16 -67 54 -67 14 0
41 -13 60 -30 18 -16 38 -30 43 -30 5 0 0 -16 -11 -35 -25 -41 -20 -60 21 -83
26 -15 30 -23 30 -59 0 -42 13 -63 51 -83 10 -6 19 -21 19 -33 1 -51 177 -156
240 -143 43 8 110 -14 110 -36 0 -26 36 -58 64 -58 15 0 26 -7 29 -20 3 -11
16 -24 29 -29 21 -8 24 -14 20 -45 -5 -40 9 -63 44 -76 18 -7 22 -16 21 -46
-1 -45 29 -74 79 -74 29 0 38 -6 61 -42 14 -24 65 -82 112 -130 47 -47 97 -99
112 -115 14 -15 41 -40 60 -54 l34 -26 -53 -106 -52 -106 -56 -20 c-54 -21
-91 -28 -274 -52 -230 -31 -255 -36 -314 -67 -32 -18 -66 -32 -77 -32 -10 0
-51 -32 -91 -71 -40 -39 -90 -83 -113 -97 -22 -14 -77 -58 -121 -97 -46 -41
-99 -78 -120 -85 -22 -7 -70 -29 -109 -48 -134 -67 -260 -86 -380 -57 -92 22
-131 19 -162 -11 -23 -23 -25 -31 -19 -80 l6 -54 -29 0 c-17 0 -34 -7 -39 -16
-7 -13 -15 -14 -48 -5 -21 6 -51 11 -65 11 -47 0 -52 -16 -38 -147 11 -110 14
-122 51 -180 53 -83 112 -136 184 -162 56 -21 71 -22 279 -18 237 4 278 11
550 88 157 45 322 59 692 59 l311 0 82 -61 c155 -114 229 -198 270 -304 13
-33 27 -65 32 -72 5 -6 16 -54 24 -105 13 -81 46 -195 134 -458 12 -36 37
-119 56 -185 19 -66 46 -156 59 -200 14 -44 25 -87 25 -96 0 -8 18 -53 41
-100 23 -46 55 -122 72 -168 38 -106 102 -201 282 -416 78 -93 156 -190 174
-215 l33 -45 -25 -3 c-36 -4 -275 78 -397 137 -94 46 -160 69 -407 145 -75 23
-98 42 -162 134 -27 38 -172 309 -216 402 -6 14 -16 34 -22 45 -34 62 -55 112
-64 158 -7 32 -24 68 -45 94 -19 23 -34 44 -34 47 0 4 -14 25 -30 48 -17 22
-30 45 -30 51 0 10 -65 113 -99 158 -11 14 -26 39 -33 55 -6 16 -24 47 -38 69
-113 173 -162 244 -177 256 -11 9 -47 15 -107 16 -50 0 -102 5 -116 11 -50 19
-130 24 -202 12 -99 -17 -130 -33 -126 -68 3 -24 19 -35 126 -90 l124 -64 24
-56 c33 -78 51 -109 97 -167 50 -64 38 -68 -80 -24 -108 39 -151 60 -214 106
-45 32 -54 34 -97 29 -26 -3 -105 -10 -177 -15 -104 -6 -140 -13 -180 -32 -62
-29 -121 -87 -130 -128 -11 -50 6 -61 94 -62 109 0 173 -13 186 -35 5 -10 25
-33 43 -50 35 -33 33 -44 -8 -44 -63 0 -212 -82 -226 -124 -3 -10 -34 -31 -68
-46 -93 -43 -139 -81 -171 -142 -48 -91 -15 -137 79 -109 23 6 68 19 102 28
l60 17 35 -27 c48 -36 125 -52 189 -38 28 6 97 34 153 61 139 69 192 83 291
78 113 -6 155 -28 177 -91 10 -27 35 -72 57 -100 22 -29 47 -66 56 -83 26 -54
92 -100 267 -189 92 -47 182 -99 198 -116 17 -17 58 -75 92 -130 96 -156 142
-190 291 -214 37 -6 93 -54 164 -141 30 -37 139 -102 334 -201 90 -45 206 -89
260 -98 25 -4 113 -30 195 -57 134 -46 162 -52 256 -56 126 -5 118 -12 148
123 10 47 22 89 25 92 3 4 54 -23 113 -59 60 -35 133 -75 163 -87 55 -22 282
-64 418 -77 81 -7 82 -9 56 -84 -12 -34 -15 -65 -10 -127 5 -63 3 -83 -6 -83
-17 0 -207 36 -293 55 -38 9 -128 20 -200 25 -88 6 -150 16 -190 30 -35 12
-98 24 -150 27 -53 3 -104 13 -125 23 -41 20 -152 54 -230 70 -30 7 -136 14
-236 17 -230 7 -261 -1 -349 -92 -33 -34 -74 -69 -91 -78 -52 -27 -141 -115
-163 -160 -13 -27 -21 -63 -21 -95 0 -46 3 -54 25 -64 22 -10 38 -5 135 45 61
32 117 57 126 57 8 0 27 -8 42 -17 23 -16 49 -18 214 -15 157 3 192 1 218 -13
18 -9 30 -18 28 -20 -29 -26 -157 -91 -216 -110 -104 -34 -119 -42 -134 -79
-7 -17 -59 -80 -115 -140 -120 -126 -163 -202 -171 -301 -5 -71 7 -101 45
-116 40 -15 73 4 138 78 32 36 80 82 106 103 42 33 54 37 87 33 43 -6 181 21
227 45 16 8 67 53 112 98 46 46 90 84 98 84 17 0 85 -27 85 -33 0 -2 -17 -16
-39 -30 -47 -31 -136 -173 -151 -242 -6 -26 -16 -57 -22 -68 -6 -11 -14 -52
-19 -91 -4 -42 -19 -96 -36 -131 -25 -55 -28 -70 -28 -177 0 -110 1 -118 24
-142 17 -18 35 -26 58 -26 37 0 53 20 118 151 45 89 81 139 101 139 26 0 111
89 133 140 12 27 32 90 45 140 22 81 30 97 84 158 32 37 73 88 91 114 17 26
39 52 49 57 10 5 46 5 88 -1 77 -10 68 -12 254 62 58 23 124 55 147 71 75 50
75 50 182 38 85 -9 113 -8 186 6 l86 17 38 -26 c50 -35 183 -175 296 -310 50
-60 119 -141 153 -180 35 -39 75 -89 88 -112 l24 -41 -20 -49 c-53 -124 -299
-447 -422 -555 -115 -102 -98 -97 -172 -45 -114 82 -229 105 -346 70 -145 -43
-282 -191 -284 -305 -2 -83 47 -108 144 -74 92 33 213 35 243 6 17 -17 -18
-63 -67 -88 -28 -14 -89 -53 -136 -88 -90 -65 -165 -119 -207 -147 -30 -19
-149 -48 -201 -48 -48 0 -101 -35 -109 -71 -7 -36 -16 -43 -76 -59 -72 -19
-128 -60 -193 -140 -133 -163 -158 -213 -152 -301 5 -70 26 -99 73 -99 17 0
103 21 191 46 131 38 172 46 237 45 94 -1 296 38 384 74 35 14 115 39 178 55
64 16 121 32 126 36 6 3 54 12 107 20 72 10 108 10 146 2 57 -12 129 0 211 37
99 43 140 123 155 304 7 78 14 105 45 166 45 88 102 166 135 182 31 15 43 39
80 164 42 144 111 239 369 513 100 105 144 159 151 185 16 57 12 154 -11 270
-16 83 -31 125 -69 196 l-48 90 5 90 c5 83 2 99 -30 200 -20 61 -45 142 -57
180 -12 39 -33 89 -47 113 -13 24 -23 45 -21 47 1 1 38 21 82 44 84 44 99 46
191 16 22 -7 81 -18 130 -24 50 -6 112 -18 139 -26 27 -8 81 -15 120 -15 39 0
98 -7 131 -15 79 -19 186 -19 260 0 37 10 62 12 68 6 6 -6 5 -33 -2 -73 -26
-150 2 -268 82 -342 24 -23 62 -75 85 -117 41 -74 46 -79 135 -133 134 -81
255 -126 339 -126 47 0 79 6 105 19 21 11 78 25 126 31 73 10 102 9 170 -4 45
-8 120 -18 167 -22 47 -3 110 -14 140 -24 30 -10 90 -25 133 -35 122 -27 164
-75 212 -240 23 -80 27 -113 32 -292 5 -181 4 -203 -10 -209 -9 -3 -54 10
-100 30 -72 31 -95 36 -161 36 -61 0 -86 -5 -124 -24 -112 -57 -199 -195 -209
-331 -5 -64 -3 -78 12 -95 27 -30 56 -25 165 32 l100 52 34 -17 c19 -9 42 -30
51 -46 8 -17 39 -46 68 -64 61 -39 114 -128 102 -169 -15 -50 -57 -90 -129
-122 -80 -37 -139 -84 -163 -130 -9 -17 -33 -51 -53 -76 -79 -95 -111 -203
-90 -304 9 -46 16 -57 36 -62 38 -10 71 3 168 65 l91 59 140 6 c110 4 154 2
206 -10 63 -15 66 -17 75 -52 9 -36 10 -37 64 -40 50 -3 60 1 100 31 25 19 62
40 83 48 39 14 44 21 91 116 28 58 61 221 51 256 -4 12 -28 92 -55 177 -47
152 -48 158 -54 320 l-6 165 41 115 c40 113 41 117 36 220 -5 104 -30 215 -75
345 -12 33 -30 99 -41 146 -19 84 -38 133 -127 314 -24 50 -53 128 -66 174
-41 157 -101 221 -205 221 -49 0 -53 2 -84 43 -18 23 -64 75 -103 115 -58 60
-89 82 -164 119 -52 25 -115 50 -140 57 -38 9 -46 15 -44 31 2 11 7 41 11 68
4 26 13 53 19 59 7 7 12 22 12 34 0 14 12 29 34 42 23 14 42 38 60 78 36 77
104 222 122 257 8 16 14 36 14 46 0 9 7 26 15 39 21 29 42 102 51 171 3 31 12
65 19 76 7 11 16 49 20 84 4 36 11 78 16 95 13 42 42 251 43 306 1 25 5 51 10
58 10 17 10 45 -4 212 -14 176 -26 279 -38 310 -7 18 -4 47 9 100 25 102 23
161 -6 274 -31 120 -33 219 -5 299 11 31 20 72 20 90 0 22 9 43 25 61 13 14
34 59 45 99 11 39 36 106 54 147 19 41 41 98 50 126 18 58 45 119 81 183 14
24 25 56 25 70 0 14 6 46 14 71 7 25 17 81 21 125 4 48 14 92 25 110 10 17 59
149 109 293 50 145 108 296 130 335 21 40 44 90 51 112 17 51 76 169 111 220
15 22 39 58 52 80 44 69 308 341 382 393 131 92 233 151 288 167 30 9 62 24
72 35 23 26 159 110 177 110 8 0 45 15 84 34 38 19 89 40 114 46 59 16 276
103 351 140 33 17 107 42 165 56 58 13 119 31 135 39 70 37 583 49 624 15 12
-10 51 -17 119 -21 73 -4 112 -11 141 -26 22 -11 60 -24 83 -28 24 -4 99 -31
166 -60 67 -29 133 -56 147 -60 13 -4 40 -18 59 -30 53 -36 226 -59 269 -35
20 10 51 78 51 111 0 38 -43 103 -121 185 -44 46 -79 87 -79 92 0 5 -17 21
-37 35 -21 14 -72 55 -112 91 -94 83 -217 153 -452 255 -142 62 -197 74 -497
108 -228 25 -243 26 -392 13 -85 -7 -247 -16 -360 -20 -115 -4 -218 -12 -235
-18 -73 -29 -449 -122 -490 -122 -17 0 -77 -13 -131 -29 -54 -16 -124 -34
-154 -41 -55 -13 -267 -104 -326 -141 -17 -10 -37 -19 -45 -19 -7 0 -42 -18
-78 -39 -36 -21 -82 -44 -102 -50 -19 -6 -52 -27 -72 -46 -20 -19 -58 -45 -84
-59 -145 -73 -550 -499 -738 -776 -43 -63 -88 -128 -101 -143 -13 -16 -27 -40
-31 -55 -3 -14 -19 -50 -35 -80 -15 -30 -28 -60 -28 -67 0 -11 -56 -92 -159
-231 -17 -22 -36 -54 -43 -70 -15 -34 -72 -102 -198 -233 -47 -49 -99 -104
-116 -122 -17 -19 -68 -65 -113 -104 -45 -38 -110 -97 -144 -130 -34 -33 -77
-68 -95 -77 -18 -10 -35 -25 -39 -35 -11 -32 -87 -104 -130 -123 -29 -13 -44
-27 -49 -44 -3 -14 -11 -26 -18 -26 -30 0 -355 -31 -381 -36 -64 -12 -252 -66
-300 -86 -261 -106 -488 -212 -558 -259 -18 -12 -51 -40 -74 -62 l-41 -40 -89
8 c-116 10 -535 6 -643 -6 -187 -21 -420 -97 -485 -158 -16 -16 -45 -33 -62
-39 -18 -6 -48 -22 -65 -35 -18 -13 -65 -41 -105 -62 l-72 -37 -73 29 c-118
48 -117 45 -103 393 10 237 12 419 6 610 -2 69 2 196 9 283 14 164 13 183 -24
452 -17 121 -60 271 -101 355 -55 112 -102 192 -126 218 -37 39 -46 59 -59
132 -6 36 -24 85 -38 109 -277 458 -271 450 -452 538 -69 33 -163 77 -210 98
-154 67 -165 74 -252 152 -48 43 -119 96 -160 118 -40 21 -82 47 -93 58 -32
30 -151 97 -245 137 -111 49 -174 86 -415 245 -362 239 -459 286 -600 291 -49
2 -108 -1 -130 -6z"/>
</g>
</svg>
</div>
Credits
Font sample: https://danmarshall.github.io/google-font-to-svg-path/
Dinosaur SVG: https://svgsilh.com/tag/dinosaur-1.html
I'm working with SVG file. I was embed SVG file through object tag html.
Like this:
<object id="map" type="image/svg+xml" data="the-file-has-same-domain"></object>
How can I detect what area when I clicked by Javascript or any library support for this.
Thanks!!!
Since your file is on the same domain (if we trust your fake-name), then you can simply access its document, and attach listeners from your main page:
// wait for your <object> is loaded
document.getElementById('map').onload = e => {
const doc = map.getSVGDocument(); // that's the inner document
doc.addEventListener('click', your_handler);
};
Unfortunately StackSnippet's null-origined iframes don't allow access to any inner document, so here is a jsfiddle.
You can do this if you use inline svg directly.
Then you can add a handler onClick from javascript and fetch the path details using event.target in function
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" onClick="goHome();">
<g id="layer101">
<path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
<path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
<path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
<path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
</g>
</svg>
goHome = function(ev) {
//path details
console.log(ev.target);
}
To get mouse coordinates when clicked on an element use e.clientX and e.clientY
document.querySelector('#map').addEventListener('click', function (e) {
console.log('X coords: ' + e.clientX + ', Y coords: ' + e.clientY);
});
#map {
display: block;
width: 100px;
height: 100px;
background: red;
}
<object id="map" type="image/svg+xml" data="the-file-has-same-domain"></object>
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.
I'm using VueJS to create an interactive map of Japan. I'm using an SVG provided by Wikipedia. My template is as follows (What's important here is the prefecture and region classes):
<div>
<svg id="japanmap" class="nation" viewBox="0 0 1024 1024" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<g fill="#FFFFFF" id="ground" class="nation">
<g class="nation" stroke="gray" stroke-width="1" stroke-linejoin="round">
<g class="region" id="hokkaido region">
<g class="prefecture" id="hokkaido">
<path d="M591 250l-1 6h-3v-9l6 -2zM620 271l-1 -11 -4 -7 -5 -1 -2 -5 -4 -1 -2 -5 4 -8 -1 -11 2 -3 8 -2 6 -9 3 4 2 -1 4 -9 6 -5 -9 -13v-7l7 -3 14 11 10 -3v3l7 2 6 -2 5 -10 -5 -24 2 -5 8 -4 4 -5 -1 -23 4 -8 1 -11 -3 -17 -8 -19 3 -10 -1 -6 2 3h5l6 -8 26 28 8 13 16 17 29 18 28 6 1 4 6 5h19l22 -27 2 5 -11 24v9l4 6 9 3 -2 2 2 -3h-6l4 13 6 6 5 1 6 -8 8 -1 -11 8 -1 7 -17 3 -2 6 -5 5h-5l-2 -2 1 -2 -2 -1 -4 6 3 2 -15 1 -8 -3 -15 8 -14 16 -8 14 -3 8v16l-2 8 -14 -12 -23 -8 -28 -18 -13 -2 4 -2 -16 8 -15 15 -4 -2 4 -1 -5 -1 -2 -6 -8 -7h-10l-6 8 -3 9 1 5 12 8 10 -1 10 12 8 4 2 3 -6 5 -4 1 -9 -4 -3 3v-5h-3l-2 5 -7 4v9l-8 3 -3 6 -8 -3 -2 -7 1 -9zM659 58l2 -2 4 1 2 5 -4 4 -4 -4zM653 45v-1l2 2 -1 9 -4 -10zM957 29l-2 -5h-2l-2 4 2 7 -1 3 -5 1 -2 8 -7 -2 1 7 -10 10 -1 4 -5 -1v3l4 1v4l-4 4 -4 -1 1 5 -3 -4 1 5 -3 7 4 1 4 -9 6 -1 4 -9 10 -9 3 -10 5 2 6 -1 15 -18 13 -9 9 -1 1 -4 -2 -3 2 -4 -5 -2 -6 2 -12 17 -11 3zM878 110l5 -6 8 -2 5 -6 3 1 3 -7 -11 3 -7 -5 -4 2 -3 11 -10 14v3l-13 15 2 7 5 -1v5l1 -14 8 -4 1 -6h3v-7zM910 136l11 -9 -4 -3 -4 3 1 2 -7 1v4l2 -1zM888 154l3 -5 -6 1zM878 157l2 -2h-4z"/>
</g>
</g>
<g class="region" id="tohoku region">
<g class="prefecture" id="aomori">
<path d="M613 358v-7l-4 -4 7 -8h5l7 -4 2 -16 -3 -5 3 -1 1 -7 6 5 4 -3 4 2 2 15 3 7 6 -3 -1 -4 2 -4 11 8 3 -2 4 -16 -4 -7 -6 6 -14 3 6 -26 17 12 9 -5 -3 31 3 14 4 11 4 -1 5 5 -6 7 -5 -1 -4 2 -2 -2 -14 10 -3 -2 1 -11 -5 1v-6l-11 7 -3 -2 -2 2 -7 -5 -3 3 -13 -1 -2 3z" />
</g>
...
...
I also have the following javascript which gets all prefecture class elements and applies a mouseover event listener that changes the fill color.
<script>
export default {
name: "Map",
mounted: function() {
const japanMap = document.getElementById('japanmap');
const prefectures = japanMap.getElementsByClassName('prefecture')
for (let i = 0; i < prefectures.length; i++) {
const prefecture = prefectures[i];
prefecture.addEventListener('mouseover', (e) => {
e.target.style.fill = "#E74C3C";
console.log(e.target);
});
}
}
};
The message gets logged to the console but the fill color of the element does not change.
It can be done using Vue directives and you shouldn't actually be using Javascript DOM manipulations to achieve that.
Simply add #mouseover="changeFillColor" and #mouseout="resetFillColor" directives to the elements that should have their fill changed when hovered.
methods: {
changeFillColor(e) {
e.target.style.fill = "orange"
},
resetFillColor(e) {
e.target.style.fill = ""
}
}
Or using only one directive (mouseover):
changeFillColor(e) {
e.target.style.fill = "orange"
e.target.addEventListener('mouseout', () => e.target.style.fill = '', false)
}
Example #1: http://jsfiddle.net/dsngf6ec/
Example #2: http://jsfiddle.net/dsngf6ec/5/
Based on your SVG (had to edit it a little to make it work): http://jsfiddle.net/dsngf6ec/55/
i am trying to move a flight image on a line drawn using SVG. i don't have any knowledge in SVG i found an example to that but its not working. please find the code below.
<div class="screenwidth">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1351.000000pt" height="1721.000000pt" viewBox="0 0 1351.000000 1721.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1721.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="#000000">
<path id="motionPath" d="M9266 15119 c-22 -5 -46 -14 -53 -21 -8 -6 -26 -12 -41 -13 -27 -2
-55 -15 -117 -55 -16 -10 -51 -30 -77 -44 l-48 -26 -47 21 c-27 12 -59 27 -73
34 -57 30 -251 47 -265 25 -4 -6 -21 -8 -40 -4 -42 8 -200 -30 -238 -58 -16
-11 -40 -22 -55 -24 -74 -13 -381 -180 -417 -228 -12 -15 -90 -64 -118 -73
-21 -7 -19 -32 4 -46 13 -8 26 -2 60 25 136 111 423 270 569 316 163 52 311
65 428 37 50 -12 133 -45 150 -60 2 -2 -18 -22 -45 -46 -262 -233 -476 -572
-498 -788 -2 -28 -7 -62 -11 -75 -9 -39 14 -164 42 -223 36 -75 117 -152 206
-196 294 -145 556 -135 802 30 122 83 238 235 268 351 14 56 -8 118 -108 307
-148 278 -289 443 -536 627 l-23 17 25 21 c42 35 202 108 264 120 181 37 648
-86 931 -244 166 -93 281 -188 320 -266 32 -63 60 -157 81 -275 28 -155 27
-537 -3 -700 -43 -233 -118 -428 -234 -600 -54 -81 -74 -100 -182 -182 -269
-200 -562 -353 -677 -353 -22 0 -93 -18 -157 -41 -308 -107 -388 -133 -517
-169 -377 -108 -878 -166 -1201 -140 -71 5 -173 12 -225 15 -120 7 -205 18
-460 60 -426 71 -827 114 -1580 170 -1370 101 -1791 166 -2345 360 -689 242
-1314 255 -1749 38 -119 -59 -165 -92 -268 -191 -120 -115 -206 -251 -261
-412 -65 -187 -73 -276 -93 -925 -27 -903 -10 -1143 106 -1555 87 -304 130
-393 244 -496 74 -68 208 -134 326 -163 113 -27 306 -45 405 -37 44 3 113 8
154 11 41 3 83 7 93 11 10 3 18 1 18 -5 0 -16 37 -13 43 3 3 7 23 16 44 19 21
3 49 8 63 12 14 3 41 8 60 11 19 3 53 10 75 16 22 5 41 10 42 10 20 -1 168 49
273 92 254 104 434 140 705 140 224 0 272 -7 595 -84 505 -121 747 -158 995
-155 256 3 408 45 542 148 101 77 130 113 398 482 39 53 71 100 73 105 2 5 20
27 40 48 20 22 73 79 117 127 195 216 440 376 780 510 174 69 361 161 515 255
158 96 426 229 735 365 121 53 234 104 250 112 138 68 454 163 611 184 112 15
329 6 409 -16 241 -67 415 -244 494 -499 27 -88 41 -301 30 -476 -7 -126 -26
-250 -38 -250 -3 0 -19 19 -36 43 -90 127 -397 496 -445 534 -72 57 -190 117
-266 137 -80 21 -215 21 -285 0 -209 -62 -373 -234 -540 -564 -103 -206 -157
-396 -166 -590 -9 -193 40 -347 135 -431 75 -66 166 -74 350 -33 110 25 316
91 417 134 28 11 68 29 90 38 104 44 320 161 420 227 151 100 252 201 305 307
23 45 42 84 44 85 4 5 70 -95 95 -144 66 -131 340 -340 556 -424 56 -22 103
-33 158 -37 105 -6 125 6 304 179 168 162 270 240 403 309 303 155 588 182
947 90 370 -95 636 -275 715 -485 33 -87 31 -224 -4 -316 -87 -223 -245 -389
-719 -755 -682 -528 -1223 -921 -1625 -1181 l-110 -72 -170 -25 c-382 -56
-742 -92 -1056 -105 -274 -12 -462 -1 -611 36 -131 32 -253 35 -407 8 -145
-25 -143 -24 -340 -60 -881 -161 -1648 -164 -2665 -9 -803 121 -972 145 -1505
211 -223 27 -257 31 -370 38 -41 3 -124 10 -185 16 -60 6 -144 13 -185 15 -41
2 -164 8 -273 14 -398 20 -1002 8 -1156 -25 -295 -62 -690 -294 -921 -541
-151 -162 -265 -359 -317 -549 -27 -99 -28 -103 -28 -410 1 -238 5 -338 18
-431 55 -388 150 -667 308 -905 100 -150 284 -328 429 -417 60 -36 236 -121
304 -147 163 -61 415 -113 659 -135 121 -11 661 -14 771 -5 235 20 696 37 866
32 354 -10 398 -28 633 -261 92 -91 171 -166 175 -166 5 0 32 -23 62 -50 30
-28 59 -50 66 -50 7 0 14 -6 17 -14 7 -17 242 -194 347 -261 135 -87 284 -151
400 -174 145 -28 292 -48 440 -60 150 -13 544 -7 655 8 399 57 684 173 916
373 72 62 189 194 189 214 0 7 7 14 15 18 8 3 15 9 15 13 0 12 107 122 175
180 191 162 475 293 805 372 319 77 709 100 933 56 40 -7 117 -34 172 -58 628
-281 1009 -539 1120 -757 80 -157 40 -448 -112 -835 -113 -287 -259 -562 -355
-670 -50 -56 -182 -150 -253 -180 -277 -118 -667 -164 -1156 -136 -285 16
-422 43 -551 107 -108 54 -157 114 -179 214 -13 59 -35 67 -45 15 -10 -57 19
-116 94 -194 56 -57 80 -72 147 -99 157 -62 397 -99 578 -89 93 6 107 5 107
-9 0 -14 12 -15 93 -9 50 4 97 12 104 17 7 6 47 7 101 3 61 -5 91 -4 96 4 5 7
28 8 67 4 106 -11 400 54 535 118 34 16 65 29 70 29 18 0 136 85 155 111 11
16 26 29 34 29 12 0 52 42 104 110 42 55 166 299 247 485 9 22 21 48 25 57 55
112 148 412 168 538 4 30 7 118 6 195 -2 123 -5 146 -24 180 -70 130 -104 175
-128 175 -7 0 -18 11 -23 24 -9 24 -68 76 -87 76 -6 0 -18 11 -27 25 -15 23
-206 158 -244 172 -9 4 -37 21 -62 38 -43 31 -226 126 -395 206 -44 21 -117
56 -163 78 -46 23 -90 41 -98 41 -8 0 -27 8 -41 17 -17 11 -48 18 -88 19 -34
1 -68 4 -74 9 -7 4 -43 4 -82 0 -48 -5 -69 -4 -69 4 0 6 -16 11 -35 11 -19 0
-35 -5 -35 -11 0 -7 -30 -8 -99 -4 -64 5 -101 4 -105 -3 -3 -6 -23 -8 -45 -5
-23 3 -41 1 -45 -6 -4 -6 -18 -8 -32 -5 -13 3 -32 3 -41 -1 -10 -4 -43 -9 -73
-10 -80 -5 -338 -67 -465 -114 -135 -49 -408 -186 -484 -243 -60 -44 -188
-169 -208 -203 -7 -11 -15 -27 -19 -35 -4 -8 -13 -19 -21 -23 -7 -4 -13 -12
-13 -17 0 -8 -228 -240 -236 -240 -1 0 -39 -25 -83 -56 -162 -111 -428 -217
-639 -255 -40 -7 -75 -16 -78 -20 -3 -5 -18 -6 -33 -3 -16 3 -32 1 -35 -5 -4
-6 -24 -8 -51 -4 -25 3 -50 1 -57 -4 -16 -12 -158 -4 -158 8 0 12 -183 12
-195 0 -11 -11 -123 -17 -145 -8 -25 9 -261 30 -267 23 -3 -3 -12 -1 -20 5 -7
6 -23 9 -35 6 -12 -4 -28 -1 -35 5 -7 5 -32 12 -55 13 -24 2 -51 6 -61 10 -10
4 -21 5 -24 1 -3 -3 -11 -2 -17 2 -16 12 -126 51 -161 57 -16 2 -41 14 -55 25
-14 11 -59 43 -100 70 -41 27 -116 80 -166 117 -50 37 -104 74 -120 82 -16 9
-43 26 -61 39 -17 12 -33 22 -35 22 -2 0 -28 22 -58 50 -30 27 -58 50 -62 50
-4 0 -25 19 -45 43 -86 96 -177 187 -190 187 -7 0 -13 6 -13 13 0 24 -104 114
-181 156 -50 28 -234 64 -286 57 -23 -3 -45 -1 -48 4 -8 12 -352 13 -359 1 -3
-4 -48 -6 -100 -3 -52 2 -103 1 -113 -3 -10 -4 -48 -6 -85 -5 -37 1 -73 -2
-80 -6 -7 -5 -47 -7 -89 -5 -42 1 -79 -2 -83 -7 -3 -5 -53 -7 -121 -4 -77 3
-119 1 -128 -6 -16 -14 -306 -16 -322 -2 -5 4 -84 11 -175 15 -222 9 -223 9
-236 17 -6 4 -44 12 -85 19 -112 16 -295 64 -398 104 -51 19 -99 35 -107 35
-19 0 -91 39 -116 63 -10 9 -24 17 -31 17 -7 0 -56 34 -108 76 -52 41 -101 78
-109 81 -19 7 -130 115 -130 126 0 4 -25 41 -55 82 -65 89 -130 206 -194 354
-27 61 -54 117 -60 125 -7 8 -14 27 -16 43 -2 15 -4 28 -5 28 -1 0 -3 11 -5
25 -9 78 -78 487 -84 500 -4 8 -6 65 -3 126 3 76 1 113 -7 118 -14 9 -15 113
0 121 6 4 10 45 9 103 -1 54 1 104 5 113 3 10 5 23 4 30 -1 8 0 21 3 29 3 8
16 47 28 85 79 250 235 466 476 659 225 180 539 332 754 366 41 7 82 14 90 17
8 3 50 4 92 3 43 -1 82 2 88 5 11 7 737 8 748 1 6 -4 275 -16 452 -21 30 -1
63 -5 73 -9 10 -5 38 -6 62 -3 26 4 47 2 50 -4 4 -5 25 -9 48 -9 23 1 71 -1
107 -5 36 -3 79 -8 96 -9 17 -2 37 -6 43 -10 6 -4 28 -7 49 -5 20 1 45 -2 55
-6 10 -4 35 -5 57 -1 24 4 41 2 46 -5 4 -7 20 -9 40 -6 19 3 36 1 40 -4 3 -6
18 -9 32 -8 15 1 35 -2 45 -6 9 -4 29 -5 42 -2 14 2 28 0 31 -5 3 -5 20 -8 38
-7 17 1 39 -2 49 -6 9 -4 29 -5 42 -2 14 2 28 0 31 -5 3 -5 20 -8 38 -7 17 1
39 -2 49 -6 9 -4 28 -4 41 -1 14 3 28 1 31 -5 4 -5 19 -9 33 -8 15 1 34 -1 42
-4 28 -11 335 -58 400 -62 36 -2 73 -7 83 -10 9 -4 24 -4 33 -1 9 4 22 2 28
-2 16 -13 182 -44 251 -47 33 -2 68 -6 78 -10 9 -4 24 -4 33 -1 9 4 23 1 30
-5 8 -6 23 -9 34 -6 11 3 22 2 25 -3 6 -10 201 -34 214 -26 5 4 13 1 16 -5 4
-5 24 -9 44 -8 20 2 42 0 48 -4 7 -4 52 -10 101 -12 49 -2 96 -7 106 -11 10
-4 46 -4 81 -1 42 4 67 2 71 -5 4 -7 31 -9 75 -5 45 4 71 2 75 -5 5 -8 50 -9
145 -4 89 4 140 3 144 -4 7 -12 235 -14 235 -2 0 4 90 7 200 7 130 0 203 4
210 11 6 6 31 9 59 6 28 -2 51 0 55 6 4 6 21 8 41 5 19 -3 42 -2 52 2 10 5 26
7 36 6 24 -3 181 16 287 35 47 8 137 24 200 35 162 29 213 40 228 52 6 5 12 6
12 2 0 -4 7 -2 15 5 8 6 23 9 34 5 12 -3 26 -3 32 1 6 3 42 7 80 9 37 1 74 7
82 13 18 15 182 -3 260 -29 31 -11 101 -23 155 -28 132 -12 540 -12 547 0 4 5
35 6 74 3 46 -5 70 -3 75 4 5 8 27 9 66 5 32 -3 67 -2 77 2 21 8 61 12 190 18
50 3 97 9 105 13 7 5 25 7 40 5 14 -1 29 2 32 8 4 5 22 7 41 4 32 -5 179 13
198 24 4 2 33 6 65 7 32 1 64 6 71 10 7 5 42 10 78 12 39 3 75 12 91 23 15 10
61 39 102 66 41 27 93 61 115 77 22 16 72 50 110 75 125 83 335 236 335 245 0
4 6 8 14 8 7 0 24 10 38 23 13 12 36 28 50 36 14 7 40 26 58 42 17 16 33 29
36 29 24 0 374 263 374 281 0 5 7 9 15 9 9 0 18 7 21 15 4 8 11 15 17 15 15 0
237 169 237 181 0 5 7 9 15 9 9 0 18 7 21 15 4 8 12 15 20 15 8 0 19 9 26 20
7 11 19 20 26 20 7 0 15 7 18 15 4 8 10 15 15 15 20 0 329 241 365 285 21 25
44 45 51 45 7 0 22 14 35 30 12 17 27 30 33 30 12 0 85 72 85 84 0 4 11 17 25
28 14 11 25 26 25 34 0 8 4 14 10 14 5 0 16 15 24 33 8 17 30 49 50 69 41 45
96 154 100 201 2 19 6 39 10 46 15 24 18 129 6 182 -16 73 -76 196 -100 209
-11 6 -20 15 -20 21 0 5 -28 38 -63 72 -63 63 -114 97 -287 190 -110 60 -463
156 -527 144 -13 -2 -26 -1 -28 3 -6 10 -256 7 -272 -3 -6 -4 -18 -4 -27 -1
-8 3 -21 2 -28 -2 -7 -5 -23 -7 -35 -6 -54 7 -333 -92 -398 -142 -16 -13 -40
-26 -53 -30 -40 -13 -177 -123 -236 -190 -31 -36 -69 -71 -84 -78 -14 -7 -32
-23 -38 -36 -16 -32 -65 -82 -81 -82 -7 0 -20 -11 -29 -25 -10 -15 -26 -25
-40 -25 -13 0 -33 -5 -44 -12 -14 -9 -25 -9 -42 -1 -31 15 -117 35 -126 29 -4
-3 -28 9 -52 26 -25 16 -74 45 -110 63 -36 18 -87 49 -115 69 -27 20 -53 36
-56 36 -7 0 -38 28 -132 119 -26 25 -57 64 -69 86 -11 22 -45 76 -76 120 l-55
79 21 126 c17 97 22 165 21 305 0 99 -3 184 -6 188 -3 5 -7 37 -8 71 -4 89
-73 272 -131 348 -16 21 -37 49 -47 63 -10 14 -24 25 -31 25 -8 0 -30 20 -50
44 -21 27 -59 56 -91 72 -31 14 -57 30 -60 34 -7 12 -125 52 -163 55 -21 2
-45 6 -54 10 -10 4 -25 5 -33 2 -8 -4 -17 -2 -20 3 -9 15 -202 12 -325 -5
-105 -15 -221 -45 -265 -68 -11 -6 -32 -11 -46 -12 -14 -1 -41 -9 -60 -18 -19
-8 -48 -19 -64 -25 -17 -5 -48 -21 -69 -36 -21 -14 -51 -26 -66 -26 -15 0 -30
-3 -34 -7 -4 -4 -24 -13 -44 -19 -64 -20 -332 -142 -394 -179 -33 -19 -67 -35
-77 -35 -22 0 -194 -83 -229 -110 -13 -11 -31 -20 -39 -20 -15 0 -166 -84
-198 -110 -11 -9 -49 -31 -85 -50 -36 -18 -72 -38 -80 -44 -8 -7 -27 -17 -42
-24 -16 -6 -28 -16 -28 -22 0 -5 -9 -10 -20 -10 -11 0 -53 -15 -93 -34 -40
-18 -99 -43 -132 -55 -33 -12 -73 -31 -88 -42 -16 -12 -34 -22 -40 -23 -61
-13 -207 -80 -302 -139 -156 -97 -425 -327 -425 -364 0 -7 -5 -13 -10 -13 -6
0 -14 -8 -17 -17 -4 -10 -21 -36 -40 -59 -18 -23 -33 -45 -33 -50 0 -5 -13
-18 -30 -27 -16 -10 -30 -22 -30 -27 0 -4 -12 -21 -28 -38 -15 -16 -38 -50
-51 -76 -13 -25 -28 -46 -33 -46 -5 0 -11 -7 -15 -16 -3 -9 -17 -28 -29 -42
-13 -14 -24 -31 -24 -37 0 -7 -7 -15 -15 -19 -8 -3 -15 -12 -15 -21 0 -8 -4
-15 -9 -15 -10 0 -101 -114 -101 -127 0 -14 -75 -84 -82 -77 -4 3 -14 -6 -23
-20 -10 -14 -23 -26 -30 -26 -7 0 -42 -13 -77 -29 -35 -16 -91 -36 -124 -45
-32 -9 -66 -20 -74 -23 -8 -3 -27 -5 -42 -4 -15 1 -32 -1 -39 -4 -9 -6 -286
-10 -299 -4 -3 1 -25 3 -50 4 -25 1 -52 5 -60 8 -29 12 -381 68 -390 62 -5 -3
-12 -1 -15 5 -4 6 -14 10 -23 9 -10 -1 -24 1 -32 4 -54 23 -537 130 -640 142
-143 17 -286 20 -295 5 -3 -5 -33 -7 -68 -4 -95 8 -450 -69 -491 -107 -6 -5
-19 -9 -30 -9 -12 0 -66 -20 -120 -45 -55 -25 -107 -45 -116 -45 -8 0 -32 -8
-52 -19 -21 -10 -48 -16 -63 -14 -14 3 -36 -2 -50 -11 -14 -9 -25 -14 -25 -10
0 4 -7 1 -15 -6 -8 -7 -21 -10 -30 -7 -8 4 -17 1 -21 -4 -3 -6 -17 -8 -31 -4
-14 3 -31 1 -39 -5 -7 -7 -17 -9 -22 -6 -6 3 -15 -1 -22 -9 -9 -11 -18 -12
-38 -4 -29 11 -150 3 -167 -12 -6 -4 -82 -4 -170 2 -88 5 -168 8 -179 5 -10
-3 -26 -1 -35 4 -9 4 -67 23 -130 41 -79 23 -135 47 -186 78 -75 47 -164 124
-189 164 -33 52 -159 447 -172 539 -6 41 -30 147 -41 178 -3 8 -6 40 -7 70 -3
68 -16 210 -22 229 -8 24 -7 627 0 640 4 6 6 72 5 146 -1 75 1 138 5 142 4 4
6 83 6 176 -1 93 1 171 4 174 3 4 6 48 6 99 0 58 10 145 26 231 14 76 27 149
28 163 2 14 10 37 18 50 8 14 35 63 60 110 24 47 62 111 84 144 21 32 45 69
52 83 8 13 24 28 36 33 12 4 39 27 60 51 40 44 63 59 206 132 103 54 199 89
305 112 44 10 84 20 88 22 4 3 45 7 90 10 44 2 86 7 92 11 29 18 455 -14 634
-49 103 -19 438 -111 471 -129 39 -21 388 -121 555 -159 295 -67 825 -145 870
-127 8 3 17 1 21 -5 3 -6 25 -9 48 -8 22 1 48 -1 56 -4 26 -9 349 -37 483 -42
70 -2 132 -7 137 -10 5 -3 63 -8 129 -10 66 -3 127 -8 136 -11 9 -4 45 -4 80
-1 40 4 67 2 71 -4 3 -6 25 -9 48 -8 22 1 48 -1 56 -4 8 -3 172 -19 364 -37
360 -32 677 -72 923 -116 78 -13 169 -26 202 -29 33 -2 65 -6 71 -10 6 -4 23
-5 38 -4 15 1 35 -2 45 -6 9 -4 37 -4 61 -1 28 4 47 3 51 -4 3 -6 32 -10 63
-10 31 0 166 -1 300 -4 141 -2 244 0 248 5 3 5 27 7 54 3 27 -4 57 -3 67 1 10
4 56 9 103 11 98 4 362 51 507 89 236 64 423 123 472 150 59 31 240 83 315 90
71 6 93 14 215 75 141 72 261 145 261 160 0 5 25 21 56 36 31 15 64 34 74 43
9 9 32 25 51 35 19 10 45 29 59 41 14 12 38 30 53 40 56 36 230 331 240 406 1
15 8 33 14 40 23 29 73 199 77 262 2 37 7 71 10 76 3 5 6 24 6 43 1 58 7 112
15 131 12 28 1 383 -13 399 -6 8 -9 24 -5 36 3 12 0 28 -6 36 -6 7 -9 20 -6
28 8 21 -22 164 -51 241 -20 53 -42 86 -91 138 -36 37 -73 71 -84 74 -11 4
-31 17 -46 31 -35 32 -172 113 -203 120 -14 3 -34 10 -45 17 -86 49 -134 70
-230 102 -175 58 -350 98 -443 100 -45 1 -85 5 -89 8 -8 9 -49 7 -97 -4z
m-288 -240 c17 -6 33 -17 36 -25 3 -8 11 -14 18 -14 7 0 19 -9 26 -20 7 -11
16 -20 20 -20 11 0 222 -211 222 -221 0 -6 7 -12 15 -15 8 -4 15 -10 15 -15 0
-13 115 -185 152 -227 15 -18 28 -41 28 -51 0 -20 86 -207 99 -216 8 -4 2 -45
-17 -125 -5 -19 -23 -51 -41 -71 -18 -20 -40 -51 -49 -70 -9 -19 -29 -40 -44
-47 -15 -7 -36 -24 -46 -37 -11 -14 -25 -25 -30 -25 -6 0 -15 -6 -19 -14 -8
-15 -213 -106 -238 -106 -8 0 -16 -4 -20 -10 -3 -5 -12 -7 -20 -3 -8 3 -23 2
-32 -2 -26 -11 -146 -12 -160 -2 -7 5 -24 6 -37 3 -14 -3 -28 -1 -31 4 -4 6
-14 10 -23 9 -10 -1 -19 0 -22 1 -3 1 -18 3 -34 5 -17 2 -42 13 -57 25 -16 11
-37 20 -47 20 -10 0 -33 13 -50 28 -17 16 -44 35 -59 43 -59 30 -124 136 -141
229 -20 105 -23 140 -11 140 6 0 9 12 8 28 -2 15 2 36 8 47 6 11 14 36 18 55
10 46 95 226 132 282 17 24 41 65 54 92 13 27 43 64 66 84 24 19 43 38 43 43
0 13 157 169 169 169 6 0 16 9 23 20 14 23 31 25 76 9z m7 -4049 c3 -5 21 -10
38 -10 52 0 187 -53 258 -101 73 -49 159 -124 159 -139 0 -5 9 -15 20 -22 11
-7 20 -18 20 -24 0 -7 20 -33 45 -58 25 -26 45 -51 45 -56 0 -15 118 -158 145
-176 14 -9 25 -21 25 -26 0 -5 16 -25 35 -45 59 -60 61 -86 20 -186 -20 -47
-43 -91 -51 -98 -8 -6 -14 -16 -14 -21 0 -12 -9 -21 -106 -100 -45 -36 -111
-83 -145 -103 -35 -21 -80 -50 -100 -66 -20 -16 -42 -29 -48 -29 -6 0 -20 -9
-30 -19 -26 -26 -55 -41 -78 -41 -11 0 -45 -16 -77 -35 -32 -19 -65 -35 -72
-35 -8 0 -22 -4 -32 -9 -36 -20 -253 -92 -377 -127 -71 -19 -137 -38 -145 -41
-29 -10 -160 -3 -192 10 -43 18 -117 93 -125 126 -3 14 -10 32 -16 39 -13 16
-14 22 -25 202 -5 87 -5 150 0 157 5 6 8 20 7 30 -1 10 0 25 3 33 3 8 27 80
53 160 48 147 124 302 233 478 29 46 52 86 52 90 0 6 101 102 108 102 2 0 21
13 41 29 20 15 56 38 81 51 25 12 51 27 58 33 7 6 41 12 75 14 34 3 66 9 72
14 12 12 32 12 40 -1z"/>
<path d="M 439.48098,95.969555 L 393.34268,142.46481 L 305.91233,133.41187 L 324.72376,114.58551 L 308.61525,98.464215 L 276.15845,130.94677 L 185.25346,123.08136 L 201.15145,107.27643 L 186.46085,92.574165 L 158.32,120.73735 L 45.386032,112.12042 L 15.000017,131.66667 L 221.20641,192.48691 L 298.26133,237.01135 L 191.91028,345.62828 L 152.82697,408.6082 L 41.549634,393.05411 L 21.037984,413.58203 L 109.25334,470.93369 L 166.38515,558.95725 L 186.8968,538.42933 L 171.35503,427.06371 L 234.28504,387.94939 L 342.81586,281.51396 L 387.305,358.63003 L 448.07703,565.00001 L 467.60778,534.58989 L 458.99769,421.56633 L 487.16033,393.38134 L 473.14247,379.35235 L 456.6139,395.97492 L 448.79636,303.63439 L 481.25315,271.15184 L 465.14464,255.03055 L 446.33321,273.8569 L 436.04766,185.1164 L 482.35108,138.7864 C 501.1942,119.92833 560.62425,61.834815 564.99998,14.999985 C 515.28999,23.707295 476.1521,61.495405 439.48098,95.969555 z "
style="opacity:1;color:#0099ff;fill:#0099ff;fill-opacity:1;fill-rule:nonzero;stroke:none;marker:none;visibility:visible;display:inline;overflow:visible" />
</g>
<animateMotion
xlink:href="#plane"
dur="10s"
repeatCount="1"
rotate="auto"
fill="freeze"
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>
</div>
SVG line image is created in Photoshop and then its was converted to SVG path. i thing its not the problem.
Please comment if you have any doubts. thank you