Search code examples
javascriptcsssvg

SVG element calculated position is wrong when svg is not its viewBox size


I have an svg map displaying countries. I want to create an svg element that gets the same position of the selected country as overlay an element. Thing is that it only gets the accurate position when the size matches with the viewBox size and this even works resizing, but the problem arises when it calculates in smaller screens or when the svg is streched above its viewbox size. Then it's inaccurate.

Added a pen https://codepen.io/rKaiser/pen/xxoqEMj?editors=1111

// Parent <g>
var parentGroup = document.getElementById('map');
// Country ID
var childGroup = document.getElementById('de');

// Get the bounding box of the child <g>
var bbox = childGroup.getBBox();
console.log('Child BBox:', bbox);

// Get the transformation matrix of the parent <g>
var parentCTM = parentGroup.getCTM();
console.log('Parent CTM:', parentCTM);

// Get the position of the child <g> relative to the parent <g>
var childCTM = childGroup.getCTM();
console.log('Child CTM:', childCTM);

// Calculate the position of the child <g> relative to the parent <g>
var topLeftX = childCTM.e - parentCTM.e;
var topLeftY = childCTM.f - parentCTM.f;
console.log('Top Left X:', topLeftX, 'Top Left Y:', topLeftY);

// Create an SVG red square 
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

rect.setAttribute('x', topLeftX);
rect.setAttribute('y', topLeftY);
rect.setAttribute('width', bbox.width);
rect.setAttribute('height', bbox.height);
rect.setAttribute('fill', 'red');
rect.setAttribute('opacity', '0.35');

// Append the square to the parent <g>
parentGroup.appendChild(rect);

Just to be sure, if there's a better way to do it, my reasoning wanting to do this is that there will several icons on the map and doing this will make the icons stay on top of the countries and not hidden, when placing the icon in the smaller countries would get the icon partly hidden because of the stacking order and theres no z-index unfortunately.

Thanks!


Solution

  • This is what you can do: you move the transform attribute to the path and use the bounding box of the group to calculate the position and the size of the rect.

    As an observation: you have paths with two id attributes. Please remove the extra id attributes from the code.

    // Parent <g>
    var parentGroup = document.getElementById("map");
    // Country ID
    var childGroup = document.getElementById("de");
    
    if (parentGroup && childGroup) {
      // Get the bounding box of the child <g>
      var bbox = childGroup.getBBox();
    
    
      // Create an SVG red square
      var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    
      rect.setAttribute("x", bbox.x);
      rect.setAttribute("y", bbox.y);
      rect.setAttribute("width", bbox.width);
      rect.setAttribute("height", bbox.height);
      rect.setAttribute("fill", "red");
      rect.setAttribute("opacity", "0.35");
    
      // Append the square to the parent <g>
      parentGroup.appendChild(rect);
    } else {
      console.log("Parent or Child <g> element not found.");
    }
    body {
      background:#444;
    }
    <svg id="svg-picture" viewBox="100 380 500 300" preserveAspectRatio="xMinYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
      <g id="map" class="svg-map">
        <g id="de" class="enabled" data-description="<p>qwdafsa faewdf14 32 3q2 r12r 1r</p>
    "  fill="#83b324" opacity="0.5">
          <path transform="translate(293.771375, 392.431713)" d="M102.632576,5.62813344 C102.634458,5.61113002 102.754923,5.49588458 102.916799,5.34474303 C102.969502,5.65836175 103.099379,5.94175215 103.355367,6.1363469 L103.227373,6.45752269 L102.632576,5.62813344 Z M105.926546,7.02997131 C105.740201,6.80703752 105.516211,6.63511401 105.275281,6.50286516 C105.5068,6.49530808 105.734555,6.47830465 105.960427,6.46130123 C106.094068,6.45374415 106.227709,6.44240854 106.357586,6.43674073 C106.210769,6.61811059 106.058305,6.81837314 105.926546,7.02997131 L105.926546,7.02997131 Z M103.767584,13.0794118 C103.353485,13.0794118 102.681515,12.3917178 102.141304,11.8400511 C101.883433,11.5755534 101.619916,11.3091664 101.348869,11.0654507 C101.416631,10.387203 101.363927,9.69573038 101.311223,9.02692903 C101.256638,8.29011398 101.202052,7.58730577 101.313106,6.98273957 C101.371456,7.00163227 101.4411,7.02619277 101.522038,7.05831035 L102.794451,7.56274527 L102.749277,7.68554778 C103.057969,7.86691764 103.361014,8.05206604 103.63959,8.22398955 C104.556254,8.78888109 104.936473,9.02315049 105.361865,9.02315049 L105.721379,9.02315049 C106.0376,9.7750797 106.675689,10.2228365 107.19896,10.5874655 C107.471889,10.7782817 107.720348,10.948316 107.899163,11.1448 C107.321307,11.63601 105.877607,12.5504164 103.993456,13.0227337 L103.767584,13.0794118 Z M62.088511,175.586806 C62.4404953,175.069146 62.8000086,174.317217 62.2447393,173.574734 L61.962399,173.19688 L61.422188,173.17043 C61.0005598,173.17043 60.6993968,173.40281 60.4358792,173.608741 C60.6485756,173.123198 60.9045641,172.210681 59.9615475,171.453084 C59.7187349,171.269825 59.5192144,171.018552 59.3084004,170.752165 C58.9790034,170.336526 58.6044319,169.864209 58.0284577,169.57515 C57.8929344,169.476908 57.6143586,169.391891 57.3244893,169.391891 C56.9837987,169.391891 56.6807534,169.505247 56.4228826,169.622382 C56.4002954,169.263421 56.3118288,168.845892 55.9786673,168.511492 C55.6455057,168.233769 55.36693,168.131749 55.0732961,168.131749 C54.3410936,168.131749 53.972169,168.743872 53.7293563,169.150065 C53.3792544,169.730071 53.1740871,169.987011 52.6997554,169.987011 C52.5171754,169.987011 52.304479,169.949226 52.0635486,169.873655 C51.3256994,169.603489 50.6443181,169.051823 49.9252915,168.468039 C49.0349785,167.748227 48.1164314,167.003855 46.9098973,166.673233 L46.7894321,166.641115 L46.6633201,166.641115 C46.4939159,166.641115 43.207475,166.837599 40.9976917,166.971737 C40.9355768,166.858381 40.8640506,166.694015 40.8132294,166.580658 C40.641943,166.193358 40.417953,165.690813 39.9756199,165.341298 L39.8288029,165.044682 L39.3563535,164.995561 C39.3092968,164.806635 39.2095366,164.613929 39.0288388,164.436338 C38.3173413,163.720305 37.5098481,163.355676 36.6345932,163.355676 C34.3231674,163.355676 32.4371343,165.964757 32.260201,167.064311 C32.1529117,167.727445 32.5274831,168.163866 32.947229,168.303672 C33.2050998,168.354682 33.4102671,168.381132 33.5928472,168.392468 C33.598494,168.54172 33.6191989,168.685305 33.6436684,168.808107 C33.2013353,169.017816 32.9227595,169.121726 32.7533554,169.172736 C32.4804264,168.447257 31.9665671,167.517736 30.1501779,167.517736 C30.1501779,167.517736 29.8396036,167.527182 29.8377214,167.527182 C29.6890221,167.527182 29.4236223,167.576303 28.3206129,167.793569 C26.8524434,168.082628 24.2662064,168.59273 22.5646356,168.706087 L22.630515,168.381132 L22.2559436,167.980607 C21.8343154,167.640539 21.4710376,167.50829 21.0908193,167.50829 C20.7708337,167.50829 20.4903756,167.600864 20.2494453,167.74067 C20.2419162,167.413826 20.2381517,167.01519 20.2381517,166.522091 C20.1534496,165.299734 20.5920181,164.12083 21.0569385,162.872023 C21.4766844,161.746018 21.9114884,160.580339 21.999955,159.323975 C22.0037196,158.581492 21.4785666,158.245202 21.2658703,158.112953 C21.2206959,157.415813 21.4823312,156.756458 21.7571424,156.064985 L24.2549128,151.970938 L24.2850291,151.789569 C24.3414971,151.455168 24.3979652,150.844934 24.4638446,150.125122 C24.5880743,148.779963 24.7932416,146.531732 25.1056982,145.804363 C25.7193177,144.574449 26.8995001,143.389877 28.1493265,142.135402 C29.5045598,140.775128 30.9068499,139.367623 31.9402154,137.578484 C32.1359713,137.234637 32.1529117,136.837891 31.9891543,136.484597 C31.524234,135.475728 29.722903,134.990185 24.1758575,133.952977 C23.0559077,133.743268 21.6931453,133.488216 21.1698746,133.335185 C21.1472874,133.225608 21.1284647,133.049906 21.1134065,132.923325 C21.0625853,132.449118 20.9891768,131.79732 20.4922579,131.298553 C20.1252155,130.994381 19.7374682,130.882914 19.2292557,130.882914 C18.2768278,130.882914 16.8444214,131.272103 15.4590718,131.648068 C15.02615,131.765203 14.5405247,131.897451 14.1245433,131.997583 C14.1960696,131.61784 14.1734823,131.156858 13.7819705,130.76389 C12.2629797,129.39228 11.3011405,128.819832 10.5294104,128.819832 C10.1322517,128.819832 9.77085614,128.970973 9.50733854,129.246807 C9.32099396,129.443291 9.2042933,129.675671 9.13464937,129.923165 C8.69796306,129.207132 8.30833347,128.355071 7.94882017,127.571025 C7.25990987,126.061498 6.66134847,124.754124 5.75409502,124.130665 C5.22517755,123.665905 4.57391262,123.665905 4.13346178,123.665905 C4.07511145,123.665905 3.99982071,123.665905 3.93394131,123.664016 C3.54995852,122.779838 4.10711002,122.094033 5.4077576,120.83389 C6.59735134,119.685214 8.39303555,117.948976 6.60488041,115.770648 C6.39783087,115.449472 5.95361549,115.290774 5.27976334,115.047058 C3.91700089,114.555848 1.85779908,113.815254 1.31947027,111.544353 C0.615501822,108.634878 2.08743584,107.452195 3.64407195,106.193942 C4.99930532,105.103833 6.85522213,103.609421 5.26846973,100.994672 C4.86189971,100.310757 4.17298942,100.04437 3.61772019,99.827104 C3.34667352,99.7231942 3.12833036,99.6343985 3.0003361,99.5437136 C3.06998004,99.4549179 3.16032893,99.3491189 3.22997287,99.2697695 C3.58948616,98.8597981 4.1259327,98.2438963 3.9885271,97.4598495 C3.93017677,96.8590618 3.45772736,96.4339762 2.82152059,96.4339762 C2.61070651,96.4339762 2.40930377,96.4774294 2.23048825,96.5152148 C2.20601876,96.5208826 2.18154927,96.5265504 2.15896205,96.5322182 C1.69780625,95.8634169 0.528917468,94.0062651 0.18446232,93.212772 C0.246577183,93.1825436 0.323750194,93.1447583 0.383982788,93.1145299 C0.818786828,92.8953747 1.47758083,92.5666418 1.66957222,91.7882629 C1.976382,90.0558028 1.00136688,88.8391134 0,88.022949 L3.20738564,85.1437025 L3.26950051,84.8338623 C3.34479125,84.4541192 3.2638537,84.0876009 3.04174601,83.8079891 C2.77069933,83.4660313 2.40177469,83.3564537 2.05731955,83.3148897 C2.28130951,82.9597071 2.53729803,82.6517562 2.8026979,82.3305804 C3.28079412,81.7543533 3.77394848,81.1592334 4.09393414,80.4110827 C5.5037533,76.9518305 3.27138277,74.2029436 1.79380195,72.3854665 C1.40417235,71.905592 1.03336544,71.4521674 0.798081873,71.0724243 C0.841374051,70.9685144 0.916664793,70.8287085 0.963721508,70.7418021 L1.16888878,70.3393877 L1.16888878,70.116454 C1.16888878,69.9860944 1.15194836,69.8651811 1.12747887,69.751825 C1.18771147,69.7461572 1.25359087,69.7461572 1.32511707,69.7461572 C1.46440495,69.7461572 2.1081408,69.7763855 2.28883858,69.7763855 C2.58811928,69.7763855 3.04174601,69.7574928 3.5273713,69.5950156 C3.73253857,69.4948843 3.88312006,69.3720818 3.99229164,69.239833 C4.56261901,69.681922 5.26658746,70.1750213 6.23030896,70.1750213 C6.20019267,70.1806891 6.31877559,70.1882462 6.44865212,70.1882462 C7.86788262,70.1882462 12.8671879,68.727841 13.6276244,66.9443707 C14.2092454,65.5822075 12.8088376,64.8472817 12.089811,64.5072132 C12.4832052,64.2578297 12.8540121,64.0443422 13.2172899,63.8346333 C15.4891881,62.5178126 18.0641315,61.0252898 17.3996907,56.853783 C17.2773432,55.0873162 15.229435,54.5620993 13.7330315,54.1804669 C13.2210544,54.0501073 12.4041499,53.8422876 12.1011046,53.6439144 C12.1481613,53.6476929 12.1839244,53.6495822 12.2178053,53.6495822 C12.874717,53.6495822 13.2568175,53.2244966 13.3358728,52.757847 C13.4488089,52.2968653 13.3057565,51.8963402 13.1382346,51.5865 C13.5240997,51.6261747 13.911847,51.7168596 14.318417,51.8094338 C14.9320366,51.9530183 15.5701256,52.1003813 16.294799,52.1003813 C16.8952427,52.1003813 17.2660496,51.8302158 17.4712169,51.6035034 C18.0584847,50.9554841 17.9681358,49.9862889 17.8702578,48.9604156 C17.8137897,48.3558494 17.7422635,47.6058095 17.8815514,47.2336234 C17.9869584,46.872773 18.2278888,46.3286634 18.5309341,45.6277444 C19.5097137,43.3643997 20.9440024,40.0449535 20.9722364,37.5700106 C21.4748021,37.2809524 21.9284288,36.8615346 22.3444102,36.3023109 C22.8243887,35.8337721 22.7321575,35.3180015 22.6248682,35.0610609 C22.3312343,34.3488063 21.5199766,34.3488063 21.2169313,34.3488063 C20.9741187,34.3488063 20.6729557,34.367699 20.3360296,34.388481 C20.0499248,34.4054844 19.7337037,34.4243771 19.413718,34.4338235 C19.1502004,34.290239 18.8452729,34.2165575 18.5008178,34.2165575 C18.3521186,34.2165575 18.2015371,34.2316716 18.0584847,34.2448965 C17.8175543,34.1447652 17.7629685,33.8235894 17.8834337,33.2700335 C18.3577654,31.1087094 20.7538932,28.0877677 21.4823312,27.7212494 C21.5256234,27.7136923 21.5689155,27.7118031 21.6122077,27.7118031 C21.8832544,27.7118031 22.1580656,27.8327163 22.4046428,27.9422939 C22.8432114,28.1349994 23.3420125,28.3522654 23.8859881,28.3522654 C27.4641807,28.2105702 28.4862525,28.1331101 28.6349517,27.2489321 C29.1262238,27.2602677 29.653259,27.2753818 30.2179396,27.290496 C30.2386446,27.2961638 30.3195821,27.3245028 30.3967551,27.3566204 C30.5793352,27.7892631 30.7807379,28.5034069 30.9896697,29.2553361 C31.8178679,32.1969285 32.9491113,36.2229615 36.1226161,36.2229615 C36.6138882,36.2229615 37.1296298,36.1171625 37.6547827,35.903675 C38.7935552,35.4767001 38.7370872,33.8046968 38.6354447,30.7705302 C38.5507426,28.2634697 38.420866,24.4773739 39.4259975,23.4326079 C39.457996,23.3986011 39.4899946,23.3702621 39.5238754,23.3457015 C39.6744569,23.7008842 39.9210341,24.1391947 40.4066594,24.3545714 C41.1633313,24.807996 42.1534046,24.807996 42.9533688,24.807996 C42.9947787,24.8344458 43.2206509,24.857117 43.4484054,24.857117 C44.2784858,24.857117 45.0483337,24.5888408 45.7955943,24.3319002 C46.3922734,24.1259698 46.9550717,23.9313751 47.4143453,23.9313751 C47.587514,23.9313751 47.7362132,23.9597141 47.867972,24.0182814 C48.2557193,24.1845371 48.4477107,24.681415 48.7187574,25.4805759 C48.8994552,26.0095714 49.0857998,26.5574595 49.4114322,27.0467802 C49.4961343,27.1846969 49.6485981,27.4473053 49.8387072,27.7779275 C52.5096463,32.389634 53.8404102,33.946392 55.1109414,33.946392 C56.2214799,33.946392 56.7842782,32.9394114 56.7842782,30.9519 C56.7842782,29.5217231 55.3198733,29.1665405 54.3505049,28.9303818 C53.7575903,28.7867973 53.0875027,28.6224309 52.8013979,28.3352619 C52.2668336,27.851609 51.946848,27.0108841 51.6080396,26.1248168 C50.9548924,24.4131387 50.1417524,22.2839322 47.5159878,21.8682929 C47.4632842,21.8664036 47.4162275,21.8645144 47.3691708,21.8645144 C47.1941198,21.8645144 47.0416561,21.8815178 46.8496647,21.9022998 C46.501445,21.9457529 45.9800566,22.0099881 45.4436101,22.0099881 C44.4121269,22.0099881 44.1504916,21.7662724 44.1071994,21.7190406 C44.0375555,21.637802 44.0450845,21.4677678 44.0639072,21.3392975 C44.1053171,20.9576651 44.3349539,20.2472998 44.5777665,19.4972599 C45.3419676,17.1356731 46.3866266,13.901244 44.9184571,12.1026596 C44.6097651,11.7852623 44.2671922,11.6586813 43.8342704,11.6586813 C43.4446409,11.6586813 42.9834851,11.7531447 42.4489208,11.8646116 C42.1308174,11.9288468 41.7901268,12.000639 41.462612,12.0478707 L41.4701411,11.6397886 C41.7788332,11.6605705 42.0894075,11.6813525 42.3924527,11.6813525 C44.3933042,11.6813525 45.5151363,10.6687041 45.8275929,8.58484 C45.8388865,7.95004549 45.6544242,7.69688339 43.3919373,5.04812774 C42.5882087,4.10538233 41.4851993,2.81690062 41.3195596,2.52028533 C40.9863981,1.73246001 40.8282875,0.852060484 40.7605259,0.0736815053 C40.9111074,0.077460044 41.0635711,0.077460044 41.2160349,0.077460044 C41.8842402,0.077460044 42.5618569,0.0453424648 43.0625403,0.0226712324 C43.3298225,0.00944634683 43.5387543,0 43.6611017,0 C44.5815311,0.153030819 45.6563064,0.525216884 46.7950789,0.92196345 C47.6853919,1.22991436 48.5964099,1.54731161 49.5224861,1.76268832 C49.5526024,1.88549083 49.6053059,2.00640407 49.6881257,2.12353877 L49.970466,2.51461753 L50.5219707,2.54484584 C50.783606,2.54484584 51.0019492,2.45038237 51.1450016,2.37859013 C51.4104014,2.18966319 51.6118042,2.00829334 51.7774438,1.84014836 L51.9675529,1.96672941 C52.4964704,2.32002278 53.0743269,2.35402963 53.4978373,2.37670086 C53.6766528,2.38803648 53.8629974,2.39937209 53.9571108,2.43148967 C54.4239134,2.51272826 54.7269587,2.54484584 55.0243571,2.57885268 C55.8487907,2.66953761 56.6280499,2.75455473 57.1230865,3.05494856 C57.1550851,3.07384126 57.1870837,3.11351591 57.2172,3.16074765 C56.7259279,3.4290239 56.2177154,3.79932069 56.2177154,4.42844739 L56.2177154,5.01223163 L56.6224031,5.26161518 C56.8313349,5.47321335 57.1230865,5.59223732 57.448719,5.59223732 C57.5917714,5.59223732 57.7272948,5.57145536 57.8534068,5.53933778 C57.9362266,6.06266539 57.7856451,6.61244278 57.6181232,7.03186058 C57.5428324,7.13199185 57.1061461,7.39271103 56.8445108,7.54763111 C56.1668941,7.95004549 55.4666902,8.36757402 55.3274023,9.13083884 C55.2558761,9.52758541 55.3650477,9.93377832 55.6379766,10.2757361 C55.9240815,10.681929 56.4210004,10.9256447 57.0101504,10.9256447 C57.7254125,10.9256447 58.4839667,10.5780192 59.2199337,10.2417292 C59.3516925,10.1831619 59.5098031,10.1113696 59.6641491,10.0433559 C59.5775648,10.2379507 59.4759223,10.4344347 59.4043961,10.5761299 C59.0072374,11.3545089 58.6307837,12.0894347 58.9244176,12.8149141 C59.0731168,13.1833216 59.3799266,13.4610442 59.782732,13.5970716 C59.9257844,13.6613068 60.1422453,13.7066492 60.3587062,13.7066492 C61.4466574,13.7066492 61.9021664,12.6562155 62.2334457,11.8872828 C62.3595577,11.5963354 62.5948413,11.0560043 62.739776,10.9577623 C62.9938822,11.0295546 64.2775894,11.8646116 65.0417904,12.3633787 C66.6210137,13.3930305 67.6299097,14.0240465 68.4091689,14.0240465 L68.5898667,14.0240465 L68.7122141,13.9881504 C69.0209062,13.9428079 69.2223089,13.7519917 69.6025272,13.3930305 C70.9784655,12.0932132 71.9497161,11.4338582 72.4861626,11.4338582 C72.5576888,11.4338582 72.600981,11.4338582 72.6856831,11.5793319 C73.4931763,13.0831904 71.8123105,14.8798855 69.7041697,16.9014037 C68.2058839,18.3372485 67.0238192,19.4708101 67.4416828,20.7007244 C67.8011961,21.7587153 69.1169019,22.0288808 70.2236758,22.1441262 C70.3121424,22.1554618 70.4175495,22.1630189 70.5210742,22.1630189 C71.4640908,22.1630189 72.2113514,21.6510269 72.8701454,21.2032701 C73.2861268,20.9198797 73.6832854,20.6478249 74.0296228,20.5760327 C74.1086781,20.781963 74.1726752,21.195713 74.2140852,21.4621 C74.3496085,22.3406102 74.5999502,23.9748282 76.1772913,23.9748282 C76.8003222,23.9748282 77.521231,23.6801022 78.4435426,23.0490863 C79.0703381,22.6731217 79.3959705,21.7001479 79.847715,20.3512096 C80.2166396,19.2478763 80.7775557,17.5777622 81.3723525,17.24714 C82.4847733,16.6444631 83.4729642,16.3232873 84.2164603,16.3232873 C85.0164245,16.3232873 85.5284015,16.6879163 85.8766212,17.5021914 L87.6327778,16.8315008 C87.5311353,16.5197713 87.4614913,16.174035 87.4407864,15.9718832 C87.8962954,15.4957873 88.3856852,15.150051 88.8995445,14.7892006 C89.505635,14.3603364 90.1324304,13.9182474 90.6425252,13.3042349 C91.2674384,12.5711984 91.6118935,11.6832418 91.9450551,10.8255135 C92.1822209,10.2096117 92.4099754,9.62015961 92.7243143,9.15351008 C93.3304047,9.25553062 94.5802311,9.68439477 95.609832,10.0395774 L96.9198909,10.485445 L97.1664681,10.436324 C97.7575004,10.3173 98.5217015,10.1642692 98.9132133,10.1151482 C98.9621523,10.3399712 98.9885041,10.7121573 99.0073268,10.9823228 C99.0600303,11.7285842 99.1202629,12.5730876 99.5531846,13.2248856 C100.063279,13.9106903 100.778541,14.0523855 101.29993,14.1581846 C101.484392,14.1940807 101.83073,14.2639837 101.879669,14.3301081 L101.945548,14.4170145 L102.028368,14.4869175 C102.286239,14.7041835 102.564814,15.170833 102.832096,15.6204791 C103.440069,16.6387953 104.194859,17.906495 105.649853,17.906495 C105.649853,17.906495 105.930311,17.8913809 105.939722,17.8913809 C106.453581,17.8913809 107.048378,17.7289037 107.626235,17.5702051 C107.880341,17.5021914 108.1288,17.4341777 108.371613,17.3812782 C108.281264,17.5758729 108.222914,17.7874711 108.222914,18.0160727 C108.41867,19.6578477 108.975821,21.1484813 109.51415,22.5899938 C110.152239,24.2997826 111.955452,24.9610269 113.402917,25.4956901 L113.777488,25.6336068 C114.528513,25.8867688 115.112017,26.0549138 115.62964,26.1021456 C116.024917,27.8327163 116.934053,30.0337151 117.749075,32.0117801 C118.33446,33.4287322 118.885965,34.7644456 119.012077,35.391683 C119.219127,37.0712435 118.080354,38.6544512 116.981109,40.1885379 C115.697402,41.9757868 114.372285,43.8253815 115.166602,45.9867056 C115.605171,47.3091942 117.310506,48.093241 119.117484,48.9207409 C120.555537,49.580096 122.52439,50.4812774 122.52439,51.3314487 C122.52439,52.2194053 122.226992,52.8806495 121.939005,53.5192226 C121.475967,54.5450958 120.901875,55.8203527 122.206287,57.4224531 C122.4491,57.849428 122.91402,58.2121677 123.322472,58.5314542 C123.713984,58.8375158 124.05091,59.1020136 124.160082,59.4288572 L124.193962,59.5270992 L124.246666,59.6158948 C124.376543,59.8312715 124.29184,60.2979211 124.209021,60.7494564 C124.122436,61.2368879 124.022676,61.7866653 124.129965,62.3269964 C124.402894,63.1677212 125.042866,63.3868765 125.357204,63.4794507 C125.447553,63.923429 125.182153,64.8189427 123.975619,66.904696 C123.779863,67.2390967 123.612341,67.5319335 123.505052,67.7454209 C122.484863,69.2700613 123.789275,70.5358718 124.568534,71.2934688 C124.995809,71.709108 125.440024,72.1379722 125.573665,72.5422758 C125.605664,72.6915281 125.462611,73.0240395 125.377909,73.2205235 C125.133214,73.7967507 124.760525,74.6658146 125.360969,75.4687541 C125.936943,76.3397072 126.911958,76.555084 127.623456,76.7137826 C127.941559,76.7836856 128.334953,76.8705919 128.449772,76.9877266 C129.193268,77.6810885 129.791829,80.5282174 129.550899,84.6751637 C129.321262,88.5972869 128.519416,90.7453862 128.14108,91.0212195 C127.76839,90.9550951 126.588208,89.4946898 125.953884,88.7106431 C124.645707,87.0915392 123.410939,85.5650096 121.97665,85.5650096 C120.926344,85.5650096 120.118851,86.3433885 119.576758,87.8774753 C119.123131,89.0129262 120.303313,89.7308485 121.131512,90.1786054 C120.179084,90.7340505 119.096779,91.0797868 118.042709,91.4179661 C116.960404,91.7655916 115.842337,92.1226635 114.869204,92.6932229 C114.285701,92.9822811 114.231115,93.6321898 114.22735,94.01949 C114.073004,94.0516076 113.894189,94.0667217 113.685257,94.0667217 C113.401035,94.0667217 113.113047,94.0402719 112.828825,94.0157114 C112.503192,93.9892617 112.183207,93.9628119 111.878279,93.9628119 C111.36442,93.9628119 110.60963,94.0232685 109.973423,94.5560425 C109.299571,95.0963735 109.109462,95.8577491 108.956998,96.4698723 C108.930647,96.5737822 108.906177,96.6682456 108.88359,96.755152 C108.663365,96.5832285 108.384789,96.4453118 108.032805,96.4453118 L107.880341,96.4453118 L107.629999,96.509547 C106.368879,96.7872696 105.745848,97.9378346 105.292222,98.7785595 C105.062585,99.2074236 104.821654,99.651402 104.580724,99.8119898 C104.573195,99.8157684 104.565666,99.8195469 104.561901,99.8233255 C104.475317,99.8157684 104.356734,99.7874293 104.247562,99.7628688 C104.014161,99.7118586 103.750644,99.6532912 103.464539,99.6532912 C102.892329,99.6532912 102.525287,99.8988962 102.318237,100.106716 C101.778026,100.446784 101.778026,101.221385 101.778026,101.684256 C101.778026,101.825951 101.778026,102.039438 101.753557,102.107452 C101.555918,102.046996 100.932887,101.72393 100.560198,101.531225 C100.046339,101.264838 99.6755321,101.072133 99.2764912,101.072133 C95.25973,101.705038 93.8687336,104.187538 92.7958405,106.549124 C92.6829044,106.326191 92.5417342,106.124039 92.364801,105.961562 C91.6401276,105.079273 90.4768856,104.848782 89.5357513,104.661744 C89.30235,104.612623 89.1894139,104.599398 89.0821246,104.599398 C88.5325022,104.599398 88.0788754,104.935688 87.9245294,105.459016 C87.4012588,107.227372 91.1545023,112.116801 93.9967278,113.972064 C94.1868369,114.072195 94.3280071,114.126984 94.4992935,114.183662 C95.0169174,114.359364 95.3049045,114.501059 95.3463144,114.752332 C95.5063072,115.504261 95.4479569,115.540157 94.8832763,115.865112 C94.3185957,116.190066 93.4640458,116.679387 93.2306445,117.971647 C92.82031,119.182669 97.6727983,126.375117 97.7273841,126.428017 C99.4891875,128.198262 100.605373,128.434421 101.781791,128.545888 C102.406704,128.604455 102.751159,128.636573 103.377954,129.26381 C103.857933,129.747463 104.160978,130.412486 104.480964,131.117183 C104.87624,131.986247 105.286575,132.885539 106.07901,133.569455 C106.858269,134.111675 107.771169,134.602885 108.829004,135.171555 C111.898984,136.820887 116.105854,139.082343 115.992918,142.027714 C115.893158,144.719923 115.518587,144.719923 115.356712,144.719923 C114.98214,144.719923 114.353462,144.547999 113.626907,144.351515 C113.201514,144.23438 112.730947,144.107799 112.205794,143.981218 L112.098505,143.956658 L111.989333,143.956658 C111.249602,143.956658 110.588925,144.360961 110.265175,145.008981 L110.208707,145.122337 L110.184238,145.24514 C110.041185,145.961173 110.08636,146.675316 110.127769,147.304443 C110.208707,148.547582 110.216236,149.227719 109.457682,149.834175 C109.069935,150.138347 107.944338,150.599329 106.856387,151.048975 C103.83911,152.286446 100.083984,153.82998 99.9258738,156.3616 L99.9051689,156.701669 L100.104689,156.975613 C101.64062,159.095373 103.330898,161.462628 103.987809,162.433712 C103.970869,162.452605 103.953929,162.473387 103.936988,162.494169 C103.135142,163.452028 102.47823,164.317314 102.566697,165.203381 C102.604342,165.596349 102.794451,165.947753 103.103143,166.195248 C103.899343,166.926395 104.755775,167.066201 105.322338,167.160664 C105.46539,167.185225 105.659264,167.215453 105.717614,167.243792 L105.715732,167.243792 C105.64797,167.243792 105.723261,167.797348 105.077643,170.17216 L105.056938,170.253398 C102.977031,169.573261 103.08432,168.885567 103.206668,168.095853 C103.281959,167.614089 103.385483,166.954734 102.946915,166.404956 C102.485759,165.824951 101.712147,165.77394 101.45804,165.756937 L101.450511,165.756937 C100.533847,165.756937 99.7790569,166.08567 99.1146161,166.376617 C98.602639,166.599551 98.118896,166.811149 97.6859742,166.831931 C97.6596225,166.760139 97.6332707,166.671343 97.6125657,166.60333 C97.4864537,166.193358 97.2775219,165.507553 96.5754358,165.271395 C96.3081536,165.18071 96.0239311,165.137257 95.7284149,165.137257 C95.252201,165.137257 94.8211615,165.248724 94.4409432,165.348855 C94.3957688,165.36208 94.3505943,165.373415 94.3073021,165.384751 C94.3374184,165.124032 94.3073021,164.842531 94.1096639,164.576144 L93.8273236,164.192622 L93.2739367,164.158615 C92.3252733,164.234186 91.8735289,164.642268 91.6476566,164.97289 C91.0999165,165.772051 91.3464937,166.769585 91.5667191,167.53285 C91.173325,167.583861 90.7008756,167.608421 90.1380773,167.608421 C89.5583385,167.608421 88.9560126,167.583861 88.3555689,167.5593 C87.7287735,167.530961 87.1019781,167.5064 86.4996521,167.5064 C85.1406542,167.5064 84.1844618,167.640539 83.401438,167.942822 C82.5638285,168.358461 82.4000712,169.102833 82.2908996,169.595932 C82.2607833,169.73196 82.2156088,169.939779 82.1779635,169.998347 C82.1629053,170.000236 82.1459649,170.000236 82.1290245,170.000236 C81.999148,170.000236 81.8655069,169.970008 81.7356304,169.941669 C81.5022291,169.888769 81.2387115,169.830202 80.9431953,169.830202 C80.5705061,169.830202 80.23358,169.926555 79.9380639,170.113592 C79.5126712,170.308187 79.1211593,170.742719 79.2924458,171.694911 C78.1367329,172.040647 75.4074434,172.726452 74.0860909,172.868147 C74.0842086,172.503518 74.0503278,172.021754 73.7303421,171.628786 C73.6343464,171.487091 73.5176458,171.375624 73.3915338,171.286828 L73.4988231,171.063895 L73.2823622,170.529231 C73.112958,169.93789 72.4767513,169.061269 70.7243592,169.061269 C70.0843879,169.061269 69.3860663,169.167068 68.7084496,169.269089 C68.0891832,169.361663 67.4510942,169.459905 66.9334703,169.459905 C66.8393569,169.459905 66.7527725,169.456126 66.671835,169.450459 L66.671835,169.027262 L66.2520891,168.74765 C65.9866892,168.56817 65.7288184,168.481263 65.4671831,168.481263 L65.0436727,168.481263 L64.6371027,168.855339 C64.1947696,169.357884 64.2813539,170.09281 64.4037014,171.109237 C64.4733453,171.689243 64.5674587,172.482736 64.4733453,172.817137 L64.4375822,172.945607 L64.4375822,173.077856 C64.2757071,173.482159 63.0221162,174.931229 62.088511,175.586806 L62.088511,175.586806 Z" ></path>
        </g>
      </g>
        </svg>

    PS: I've changed the viewBox of the svg element. Please change it back to what you need,