как выделить изображение карты svg на основе формы

#javascript #html

Вопрос:

я новичок в кодировании, у меня на веб-сайте есть форма, в которой есть входные данные для отправки и назначения , после того, как пользователь отправит форму, в ней отображается изображение карты svg, я хочу выделить области отправки и назначения на основе того, что в форме, возможно, с помощью javascript?, я часами искал, как это сделать, но все, что я нашел, — это выделение карты при наведении курсора и другие бесполезные для меня вещи, пожалуйста, помогите. вот форма, чтобы показать, что я имею в виду.

 <form action="rideHandler.php" method="POST" id="tripinfo">
                
                    
                 <div id="toFrom">
                      <label>From?
                      <select name="from" id="from" required >
                          <option value selected disabled>select an area</option>
                          <option value="blahbalh">blahblah</option>
                          //other options
                      
                      </select>
                      </label>


                      <label>To?
                      <select name="to" id="to" required >
                          <option value selected disabled>select an area</option>
                          <option value="blahblah">blahblah</option>
                           //other options
                          
                      </select>
                      </label><br>
                 </div>
                   //other irrelevant form inputs
                      
               <button type="submit" class="subBtn" id="show"> Finish up</button>
                 

 

в идеале после отправки на нем отображается страница с выделенными областями, пожалуйста, помогите? мне не нужен код, мне просто нужен метод, как мне это сделать? и что я должен использовать? должно ли это быть через javascript или что-то еще?

Ответ №1:

У вас есть пример SVG, который вы могли бы нам показать? Лучший способ, который я мог бы придумать для этого, — это использовать JS для выделения известного участка карты. Вы можете пометить путь, который хотите выделить, идентификатором, а затем использовать Javascript, чтобы выбрать этот путь и изменить любое его свойство. Небольшая демонстрация ниже:

 function highlight() {
    document.getElementById("britain").style.fill = 'red';
} 
 <button id="myButton" onClick="highlight()">Click me to highlight area!</button>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   height="1941.5708"
   width="1064.0363"
   version="1.1">
  <path
     id="britain"
     d="m 480.40861,432.95371 c -1.166,0.106 -1.89,1.416 -2,5.219 12.047,9.749 -3.062,6.258 -9.719,7.125 -5.957,-0.347 -6.754,-5.604 -15.906,-3.344 -10.007,10.509 -21.525,12.454 -34.625,10.438 -2.634,-14.556 -4.796,7.983 -12.813,-0.375 -3.609,6.989 -8.073,1.084 -11.219,7 -0.209,0.324 -14.297,-3.93 -18.124,6.625 -1.732,8.566 -9.646,13.053 -3.594,1.219 15.048,-10.29 -18.143,-25.705 -13.375,-10.188 -7.76,4.881 -9.621,16.34 -16.75,18.313 4.506,-9.193 16.232,-20.698 1.719,-24.344 -4.667,-10.497 -0.813,-0.383 -6.376,1.875 -1.77,-9.049 -12.039,-8.776 -19.031,-12.031 -1.758,4.176 0.06,9.418 -2.187,13.562 -8.995,6.206 -10.92,17.581 0.781,19.406 8.348,8.091 -8.682,-1.769 -7.5,6.969 -2.017,1.05 13.682,9.437 0.969,4.875 -6.734,-7.606 -9.85,14.695 -5.469,13.969 -5.007,7.775 19.732,13.786 17.25,13.844 1.428,6.653 -1.525,0.388 -7.156,0.25 -7.218,-6.528 -9.842,2.145 -16.594,0.343 -7.857,7.44 -15.297,-4.256 -19.25,1.032 5.824,6.238 7.203,16.219 15.75,18.187 -3.992,3.8 -0.631,4.129 -3.563,6.75 7.362,9.437 -5.796,6.048 -9.624,8.281 -3.519,-10.763 -14.562,-4.192 -5.844,3.094 4.845,5.41 13.807,14.144 23.344,18.156 -4.856,6.958 3.062,10.317 9.468,15.532 4.882,12.678 0.03,1.554 -6,-1.625 -5.012,-8.557 -15.021,-2.374 -18.125,-10.25 -12.062,-0.805 0.444,6.524 5.438,10.875 13.731,6.703 -3.083,5.412 -6.844,-2.313 -11.419,-11.123 -6.837,15.31 -18.344,3.719 -0.1,-8.857 -10.365,-14.352 -11,-2.938 2.615,4.91 10.272,15.814 4.657,17.969 -1.291,2.742 -3.369,5.807 -6.313,-2.937 0.06,-12.199 -5.568,-11.981 -15.125,-10.844 1.632,8.404 -3.67,26.385 10.469,25.75 8.899,10.395 -6.121,0.613 -7.5,7.656 -8.413,9.317 5.9,9.919 6,19.188 4.854,3.347 4.109,7.176 14.906,5.5 14.796,5.807 -11.812,0.644 -6.844,6.656 -4.664,0.886 -5.926,-8.833 -10.406,-6 -9.366,-15.542 -13.913,8.182 -11.469,18.656 7.481,0.295 5.114,6.635 5.094,10.938 -2.445,13.562 14.662,3.934 19.594,-2.406 -6.122,13.233 10.997,6.811 15.75,-2.376 3.6,4.868 -12.977,15.082 -21.094,14.376 -14.562,9.548 3.57,13.201 12.281,11.093 3.441,4.159 15.447,9.317 14.281,10.75 -9.52,-0.57 -13.19,-13.44 -23.187,-5.406 0.769,6.37 -1.323,10.109 -5.313,16.875 5.905,2.95 14.17,4.777 16.969,10.25 13.438,-3.871 2.658,3.768 -4.406,0.75 -6.881,-13.218 -29.93,2.851 -18.813,11.5 10.408,-5.924 3.945,11.344 15.126,8.062 14.523,-5.034 0.384,3.476 -6.063,2.376 -5.359,-5.236 -17.001,-11.816 -18.406,0.874 -3.713,5.561 -0.541,12.747 -3.438,13.813 -12.717,4.411 9.121,2.371 14.875,2.031 -11.341,3.424 1.295,9.858 4.469,1.406 4.307,7.919 -17.152,4.331 -17.281,11.938 10.844,2.849 6.288,8.69 -0.782,7.125 -1.437,0.239 -2.901,8.364 -8.906,0.344 -8.86,2.758 -21.95,0.578 -27.812,8.156 l 0.06,0 c -1.5,13.932 19.742,6.125 26.969,8.906 9.055,5.32 15.726,-5.304 24.031,-4.593 4.864,6.461 24.951,0.45 8.75,5.5 -9.451,-4.911 -16.94,-2.51 -24.281,4.937 -17.106,-6.22 -13.544,11.669 -2.25,18.281 10.867,2.312 12.405,2.725 19.844,8.469 13.078,0.934 19.738,-22.809 29.875,-25.687 3.883,-9.414 12.491,-9.409 15.531,-17.219 0.271,-3.092 14.643,-18.599 11.531,-11.375 -6.176,7.834 -17.67,20.839 -0.406,20.937 12.634,-7.222 1.654,4.886 -5.5,0.03 -12.038,0.555 -10.365,8.04 -16.531,13.094 -5.112,5.778 -8.196,19.703 2.687,13.25 13.033,-6.437 3.161,1.923 -3.5,4.5 -7.647,-7.396 -13.326,13.606 -7.031,3.5 1.857,3.356 4.876,7.824 10.75,6.656 17.317,2.567 -7.257,0.97 -11.344,0.938 -5.858,11.808 -15.697,20.2 -15.343,34.906 1.029,6.544 6.542,7.803 0.437,15.125 -6.363,14.276 1.811,5.71 6.5,-1.781 3.503,3.265 -8.209,14.272 -0.875,18.125 -9.306,-2.475 -10.817,11.94 -16.875,18.906 -1.267,14.28 2.937,0 6.969,-5.062 9.151,-13.826 4.181,4.3 -4.188,11.5 -6.076,11.175 3.441,10.264 8.438,2.187 1.683,2.798 -14.45,17.217 -5.875,25.406 5.759,9.824 13.217,-3.343 18.75,-10.156 -0.71,9.234 -15.496,17.488 -19.313,28.344 -3.813,10.707 -7.635,25.40999 -6.094,38.90599 -2.943,9.616 -13.742,16.174 -10.25,28.813 10.092,5.934 34.454,-2.463 28.657,-17.094 -8.105,-4.694 -0.752,-7.046 1.156,-14.5 0.964,-7.544 6.704,-16.203 4.563,-20.96899 -4.166,-11.938 6.804,-25.785 15.843,-32.375 -6.644,-14.562 -13.888,-25.7 -13.156,-42.156 2.619,4.538 10.917,-0.143 13.25,-7.156 3.387,-13.821 21.337,-14.928 23.687,-28.657 1.982,-0.708 16.499,-11.325 13.594,-5.468 -12.632,3.451 -11.318,16.875 -22.281,20.625 -8.394,7.493 -18.613,19.951 -18.5,31.25 -2.654,11.021 3.289,21.217 14.406,23.156 -4.206,-8.645 -1.107,-14.723 0.938,-23.375 0.553,3.544 16.708,17.894 10.156,2.031 3.705,-9.977 1.739,15.781 8.437,16.594 7.149,-3.378 10.048,-20.51 8.532,-23.781 4.88,-0.6 4.204,-16.797 1.656,-22.375 1.098,-17.146 0.731,12.424 7.062,-0.594 1.56,1.511 -9.007,17.026 -0.656,23.625 14.538,4.21 1.224,-6.581 0.719,-13.188 6.335,5.417 16.802,21.879 30.875,22.344 8.221,3.926 -13.581,-0.684 -18.375,-0.781 -15.332,-12.417 -22.329,10.218 -18.375,23.375 11.092,9.173 -9.739,18.983 4.844,23.969 2.352,9.312 20.445,8.03 18.094,21.24999 0.65,2.138 9.168,11.134 3.031,18.593 -12.514,1.582 -12.259,14.442 -19.781,21.376 2.373,16.586 -12.668,24.841 -18.188,37.25 -7.456,12.097 -2.612,24.538 3.344,34.968 -12.867,6.174 -3.306,-21.423 -16.032,-16.656 -11.878,13.156 4.582,32.862 13.407,42.562 8.978,5.692 0.323,19.764 13.531,22.719 2.514,-2.256 -0.621,-11.711 -4.219,-17.187 -6.568,-9.917 -4.047,-18.896 8.281,-22.656 5.548,3.21 13.714,9.984 21.313,13.218 7.582,6.789 12.57,18.013 24.781,18.188 6.245,-3.759 -1.898,-15.902 3.188,-18.782 -3.146,-6.294 -13.044,-12.567 -5.282,-20.124 2.142,-0.105 5.618,13.091 14.063,11.25 7.945,-10.747 2.498,4.383 8,7.468 8.07,9.09 8.733,1.094 12.031,-7.031 -3.248,9.544 5.317,16.714 13.25,8.594 11.281,-4.71 5.615,-8.281 9.532,-14.969 -0.457,1.79 4.243,5.786 11.5,-0.75 9.773,1.813 16.835,-1.37 13.874,-12.438 -2.962,-10.868 3.552,-2.298 6.063,-6.468 11.724,-0.806 31.239,7.634 46.063,0.531 12.993,-1.194 -9.948,7.257 1.343,5.281 -1.533,11.714 -19.173,-6.393 -24.75,6.125 5.793,2.547 2.148,10.673 -4.187,5.469 -4.427,-1.261 -12.579,14.493 -11.188,21.781 -13.079,10.705 -11.606,28.319 -18.625,41.344 3.255,14.21 24.49,25.88 22.157,42.687 2.418,6.901 13.772,21.085 16.437,9.719 3.023,-18.891 5.658,7.812 -0.156,9.157 -0.932,7.048 2.139,10.941 7.5,15.25 1.229,1.618 7.277,-7.685 10.156,-13.657 2.587,-12.504 4.911,-0.946 10.719,0.281 2.052,-3.462 17.046,-12.488 10.937,-5.593 8.283,10.728 1.559,16.764 -6.093,24.562 -0.145,9.123 7.644,4.59 4.812,12.031 3.354,5.156 -10.159,5.315 -16.906,6.719 -6.351,14.868 -5.517,43.36 17.812,32.375 -6.521,5.736 -21.6,15.874 -25.531,29.813 6.793,11.344 7.698,27.659 19.969,35.125 4.607,9.6 20.508,-3.469 15.406,6 -10.452,16.157 -25.691,-6.643 -27.125,-18.532 -21.254,-1.957 -14.932,15.171 -5.719,24.532 5.284,13.234 -5.397,4.096 -11.281,-1.594 -15.087,-21.837 -33.005,5.373 -51.25,0.344 -5.011,-3.469 -22.765,-13.104 -12.75,-1.063 -7.478,3.858 -22.312,11.858 -33.25,12.344 -4.995,4.815 -12.317,19.427 -16.375,17.969 0,9.79 -6.657,19.291 -15.656,25.75 -12.056,6.384 -22.615,14.612 -27.344,27.906 3.472,3.078 5.817,-3.137 10.938,-1.781 6.587,-8.405 11.638,6.722 15.937,1.969 -1.813,-13.947 16.855,-20.065 29.813,-19.157 13.589,3.869 -0.232,17.613 9.156,23.938 1.831,8.792 9.976,5.045 10.5,5.937 -10.017,5.125 -18.585,23.338 -4.469,30.188 10.354,-4.933 10.453,1.749 0.594,3.375 -5.144,3.156 -3.767,21.239 -9.344,29.625 -5.95,15.438 -21.627,19.874 -32.375,28.5 -3.961,9.189 -20.714,0.822 -24,8.281 -4.476,-0.169 -6.751,9.971 -14.312,11.281 1.635,9.967 -8.949,-0.04 -11.063,6.782 -2.708,-0.63 -16.166,-8.246 -13.5,2.656 -3.723,7.379 -16.626,8.387 -21.5,13.781 -5.317,11.92 11.158,0.185 17.437,8.437 4.63,10.229 -0.402,13.764 -7.687,17.594 -8.53,1.136 1.722,4.188 3,9.406 -0.08,-11.148 14.11,0.284 22,-4.25 16.337,-2.648 -5.944,5.52 -9.25,3.844 -2.843,1.263 -12.789,0.08 -1.719,4.438 -0.03,6.39 7.941,10.92 14.282,8.25 4.355,-9.229 15.237,-3.099 21.093,-8.406 -0.634,-14.972 16.484,-11.212 27.281,-13.188 -4.62,-9.907 2.383,0.416 5.376,-5.938 -0.374,3.434 11.111,11.851 1.437,8.126 -3.051,6.017 10.082,11.237 16.656,7.531 3.893,8.197 17.447,-3.756 11.313,5.375 -9.162,7.707 -15.332,-2.423 -20.906,6.281 -1.019,7.523 4.439,13.229 11.656,10.594 5.068,-4.973 13.894,-2.378 19.968,-2.781 -8.262,-8.378 11.357,-11.867 14.188,-7.969 9.154,4.788 6.079,23.556 16.969,21.656 11.025,16.213 33.533,18.189 49.531,11.031 -1.625,-11.281 11.335,-15.55 18.188,-23.656 4.875,4.708 17.332,0 25.156,-4.156 11.467,-7.216 18.157,-23.328 31.218,-27.719 3.917,-7.145 7.06,0.259 -0.437,2.031 -12.018,9.434 -19.743,25.336 -28.219,38.344 -11.218,0.442 -18.487,17.239 -25.281,19.469 -0.541,8.837 -6.439,7.297 -4.75,15.375 4.48,10.029 -2.992,16.295 -13.219,13.187 -11.912,6.112 -25.806,5.056 -36.281,-2.5 -9.769,1.347 -20.666,-2.799 -31.125,-0.75 -11.426,2.131 -35.481,-1.062 -38.719,8.969 -8.545,5.276 5.82,14.605 -4.562,21.5 -6.837,13.673 -18.263,1.076 -27.531,2.5 -0.09,5.312 0.06,10.764 -2.938,15.312 4.064,15.049 -3.046,25.281 -12.375,34.626 -11.1,1.758 -4.094,19.433 -18.313,17.624 -7.631,-1.162 -4.281,3.336 -7.874,4.938 -8.946,-2.161 -8.623,11.033 -11.126,20.656 -12.272,-0.508 -6.175,11.18 -15.281,15.875 -4.935,9.559 -17.391,10.933 -21.906,19.563 -8.074,-6.396 -16.05,2.319 -25.406,5.687 -3.337,4.816 -5.311,14.936 -0.469,18.563 15.472,6.418 11.133,-18.288 23.438,-11.75 15.125,0.844 18.192,14.195 24.343,24.125 2.25,-1.735 6.282,-8.903 11.719,-9 10.061,-7.285 -8.096,-11.571 0.406,-14.969 5.593,-5.5 0.03,-8.874 5.469,-15.344 0.947,-0.06 2.453,9.797 2.125,11.125 3.921,-6.512 7.865,-8.51 13.125,-12.375 9.906,0.652 9.847,-6.677 11.625,-13.531 1.662,-8.956 8.858,-0.29 11.375,-2.469 13.885,3.66 23.712,-8.812 37.656,-3.687 4.574,10.133 14.708,0.209 4.844,-1.875 11.605,-4.348 11.083,15.036 23.563,9.031 9.61,-4.062 12.677,14.912 20.718,12.656 8.265,3.974 14.49,-0.532 14.094,-10.437 6.819,-4.231 5.518,-11.067 11.125,-7.969 7.827,-8.868 -1.466,-7.626 -2.063,-16.406 11.149,-0.927 -1.093,-11.41 8.032,-17.813 7.072,-4.146 -3.991,-25.786 3.875,-13.218 4.972,15.381 14.434,-6.571 23.406,-6.532 15.517,2.231 29.25,-12.808 44.094,-2.375 11.289,7.824 32.583,15.437 29.719,30.563 1.704,-1.308 1.538,-4.09 3.5,-5.344 -5.079,-6.108 -3.176,-18.945 9.25,-13.812 14.117,-0.629 24.074,7.725 36.593,6 5.348,-5.418 3.772,-8.624 2.719,-13.25 -7.759,0.471 -8.108,-4.446 -12.469,-2.282 -4.982,-1.754 4.932,-5.109 9.907,-4.406 2.465,11.785 11.328,-6.524 20.624,0.469 0.98,-0.827 1.889,-5.929 9.844,-4.219 10.097,7.12 13.065,-1.118 22.219,-5.219 15.275,0.798 13.115,-12.639 2.969,-18.281 -14.523,-7.991 4.512,-1.873 8.375,4.75 6.435,2.003 16.167,17.709 20.25,8.188 -6.279,-6.306 -2.395,-7.939 4.812,-5.563 -8.594,6.32 3.451,14.848 3.75,1.781 9.068,-8.631 0.233,10.349 3.031,7.938 9.484,4.633 1.999,-17.723 7.563,-7.282 -0.82,0.509 11.109,-0.558 3.094,5.188 -5.87,3.023 17.105,16.512 14.093,5.531 3.879,-3.201 25.157,-5.242 35.813,-7.562 22.303,-10.163 44.018,5.92 65.031,10.093 8.012,-15.244 25.878,-15.4 40.844,-20.656 7.298,-12.52 18.995,-9.816 30.844,-6.937 -4.098,-14.779 10.134,-26.972 23.718,-27.907 11.612,-2.522 25.581,-12.321 19.219,-27.218 -7.836,-10.95 7.405,-10.108 5.188,-21.156 -3.353,-1.505 -7.468,0.212 -10.969,0.593 -18.681,-1.704 -35.909,11.544 -53.781,4.407 6.489,1.87 22.051,-3.226 7.343,-10.032 -7.14,-3.943 -14.824,-2.616 -15.156,1.063 -2.338,0.178 -2.678,8.519 -10.031,4.5 -12.114,2.41 -1.246,-10.642 6.469,-7.563 9.835,-5.797 -12.665,-9.658 -18.219,-7.844 -2.428,1.197 -14.78,10.007 -9.656,4.188 3.514,-10.863 16.836,-6.505 23.093,-11.656 9.321,1.924 20.456,1.04 27.032,-8.594 9.463,-7.334 -3.13,-4.311 -4.875,-3.469 -10.95,-7.303 3.792,0.854 7.343,-6.75 6.959,-10.512 -1.794,-20.215 -11.374,-11.343 -3.72,1.868 -9.531,2.339 -9.719,-2.782 13.039,2.946 14.769,-11.277 26.562,-11.531 6.084,11.043 21.536,3.879 27.594,-5.437 6.6,-10.983 -2.132,-0.371 -6.75,-5.626 4.01,-4.577 14.771,-13.347 0.656,-10.968 -11.879,1.585 -8.092,-5.029 0.813,-1.719 12.485,4.151 -2.099,-12.059 6.531,-4.187 4.335,16.195 14.798,-3.203 18.469,-10.844 12.892,-1.422 16.618,-16.467 15.968,-28.563 2.541,-15.704 13.387,-29.641 13.844,-45.031 -1.976,-20.752 -3.364,-45.581 -25.531,-56 -11.977,-15.189 -31.207,-15.337 -47.687,-21.5 -10.369,-2.814 -0.903,1.437 -3.719,2.375 -12.38,-1.789 -21.758,-1.982 -35.407,-1.469 -12.442,-4.391 -18.701,8.746 -20.374,20.375 -5.962,5.443 -4.392,16.716 -11.063,6.094 -14.479,6.324 -15.89,-22.296 -31.5,-12.906 1.74,-6.802 12.486,-16.056 18.906,-24.5 12.081,-7.246 19.466,-18.211 14.094,-32.625 -6.457,-19.791 -11.577,-40.5 -30.844,-48.032 -6.246,-11.263 -17.812,-11.773 -25.531,-22.937 -2.596,-13.708 -13.622,-7.666 -23.062,-7.687 -7.082,7.499 -12.58,-1.789 -18.094,-1.126 -11.753,5.99 -7.362,-3.558 2.312,-4.124 11.586,10.712 29.599,-9.068 38.5,3.5 6.936,10.194 16.961,15.179 28.219,10.812 11.387,-0.793 4.115,16.889 8.75,9.125 0.401,-15.713 -15.652,-27.757 -22.406,-41.5 -10.215,-13.228 -22.637,-42.254 0.531,-48.406 -3.99,-6.904 -22.855,-5.132 -18.969,-16.157 -12.542,-4.642 -14.465,-15.035 -18.156,-26.531 -6.601,-8.551 -7.171,-20.431 -19.375,-22.75 -11.36,-12.949 -28.921,-12.17 -42.125,-21.281 -10.012,-8.367 -5.252,7.58 -13.063,2.156 4.21,-5.875 -1.525,-10.674 2.313,-15.375 -16.095,-7.608 -16.76,-28.269 -19.031,-43.531 -5.541,-12.158 -11.619,-22.112 -15,-34.812 2.319,-10.191 -8.047,-18.249 -4.25,-28.813 -4.678,-7.871 -3.34,-16.035 -3,-25.375 -3.241,-10.267 -2.278,-19.36 -10.406,-26.62499 -8.87,-1.991 -5.763,0.192 -8.75,-6.813 -2.408,1.961 -8.124,0.299 -9.938,-7.562 -13.104,-11.924 -17.787,-33.814 -30.812,-41.406 -14.795,3.742 -25.819,-18.945 -38.75,-13.75 0.815,-13.714 -22.919,-15.59 -28.563,-6.656 0.311,8.906 -10.407,14.566 -19.156,15.5 -7.942,-5.526 -17.67,-5.525 -26.625,-6.657 -9.514,-0.637 -21.069,-5.09 -32.032,-5.093 -15.195,-2.764 4.596,-13.047 11.469,-4.282 12.319,9.869 21.421,-5.606 34.5,-3.594 2.331,-11.257 13.76,-19.676 23.375,-26.906 12.279,6.456 25.59,0.281 34.25,-10.25 3.82,-12.754 -19.157,-9.139 -22.312,-18.094 -1.327,-0.663 6.583,-16.508 -5.094,-15.812 -11.448,3.143 -22.728,12.058 -34.688,17.094 -9.734,3.015 -13.584,-1.858 -1.718,-1.906 9.232,-11.755 22.848,-18.099 36.031,-16.969 6.811,-5.119 15.45,3.454 16.906,-6.813 7.998,-6.672 25.583,-14.419 20.657,-25.844 7.201,-6.67 6.451,-10.777 8.718,-20.5 8.056,-5.579 20.206,-16.754 23.438,-29.843 -4.363,-15.124 14.053,-26.073 11.718,-39.781 -5.023,-21.756 18.532,-42.298 25.532,-55.344 7.708,-4.548 -0.903,-10.178 4.344,-11.875 -6.673,-5.188 -3.854,-17.626 -7.563,-21.781 -7.224,-9.396 -14.039,-14.282 -25.75,-14.25 -6.507,6.255 -15.002,1.977 -21.687,2 -11.279,7.351 -28.604,-1.14 -41.688,-0.469 -9.471,-3.958 -17.792,-4.367 -25.812,2.219 -18.437,3.087 -39.228,-20.706 -53.282,-0.313 -10.697,2.022 -21.463,3.069 -29.156,13.031 -5.687,5.903 -32.483,-2.34 -22.75,6.282 -5.853,5.384 -11.872,17.54 -21.125,13.124 9.428,-6.029 -6.596,-11.985 4.625,-9.218 2.983,-4.698 9.717,-4.669 10.625,-11.032 5.351,-6.642 13.882,-18.409 0.156,-10.624 -9.993,-3.253 -19.176,0.35 -26.812,11.312 -9.958,12.372 -8.113,-0.862 1.219,-5.594 3.334,-11.95 15.88,-6.277 22.874,-14.562 6.409,-7.169 11.947,-3.834 10.157,4.937 9.078,-6.333 16.115,-18.508 23.031,-28.469 2.577,-12.854 -4.138,2.609 -8.906,2.876 -10.526,3.901 -1.507,-0.03 -7.813,-3.032 -7.406,4.636 -20.263,3.714 -24.593,-4.218 7.318,2.615 19.319,1.997 20.187,-6.063 -2.06,-8.317 2.083,-15.851 12.031,-19 4.163,-8.111 12.019,-13.254 20.032,-19.313 12.902,-8.087 22.123,-21.109 30.843,-33.468 15.716,-5.033 27.298,-15.617 31.594,-31.344 8.466,-9.87 -2.216,-5.83 -6.781,-9.125 -3.177,-11.249 11.036,-19.264 10.937,-29.937 -6.091,-3.285 -15.317,0.61 -22.187,-2.75 -5.905,4.823 -11.771,-3.067 -14.75,-2.876 z"
     style="fill:#FFF;stroke:#000000;stroke-width:3" />
</svg> 

Вы можете видеть , что путь есть id="britain" , и в моем фрагменте Javascript я ссылаюсь на это, чтобы изменить цвет заливки.

Комментарии:

1. большое вам спасибо, это сработало как волшебство