У меня есть svg-карта, встроенная в php-страницу:
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="../CSS/Pages.css"/> <title>Map</title> </head> <body> <div id="Holder"> <div id="DataPage"> <div id="DataPage_Left"> <h3>Country:</h3><text class="label" id="country_name"> <!--get country name from svg to display--> <h4>Regional Representative</h4><!--get Rep name from database based on country from svg to display--> </div> <div id="DataPage_Right"> <embed name="canvas" id="canvas" class="emb" src="../images/Africa.svg" type="image/svg+xml" scrolling="no" seamless style="border:groove"> </div> </div> <!-- end DataPage --> </div><!-- end Holder --> <script>//<![CDATA[ // wait until all the resources are loaded window.addEventListener("load", findSVGElements, false); // fetches the document function getSubDocument(embedding_element) { if (embedding_element.contentDocument) { return embedding_element.contentDocument; } else { var subdoc = null; try { subdoc = embedding_element.getSVGDocument(); } catch(e) {} return subdoc; } } function findSVGElements() { var elms = document.querySelectorAll(".emb"); for (var i = 0; i < elms.length; i++) { var subdoc = getSubDocument(elms[i]) } } //]]> </script> </body> <html> Я получил карту с веб-сайта Peter Collingridge. Http://www.petercollingridge.co.uk/sites/files/peter/Blank%20map%20display%20names.svg . (Блестящий учебник по SVG).
В событии onclick мне нужно отобразить имя страны, которую я только что нажал на левой панели, а затем мне нужно получить данные из базы данных mysql и отобразить ее под ней, как в названии Rep и других данных. Есть ли какие-либо учебники по этому поводу или может кто-то направить меня туда, где я могу получить помощь.
Я искал 4 дня для своего решения. Возможно, кто-то может помочь.
благодаря
Хорошо, что-то работает … Связь между встроенными svg и main php не легка, поэтому я помещаю весь svg в php. Как это:
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="../CSS/Pages.css"/> <title>Map</title> </head> <body> <div id="Holder"> <div id="DataPage"> <div id="DataPage_Left"> <h3>Country: <span class="label" id="country_name"></span></h3> <h4>Regional Representative:</h4><!--get Rep name from database based on country from svg to display--> </div> <div id="DataPage_Right"> <svg id="map" version="1.1" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" 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" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="730px" height="570px" viewBox="0 0 730 570" xml:space="preserve"> <defs> <radialGradient id="RadialGradient" fx="50%" fy="50%" r="50%" spreadMethod="pad"> <stop offset="0%" stop-color="#246875" stop-opacity="1"/> <stop offset="100%" stop-color="#2A4B59" stop-opacity="1" /> </radialGradient> </defs> <style type="text/css"> .land { fill: url(#RadialGradient); stroke: white; stroke-width: 0.5; stroke-miterlimit: 2; } .coast { stroke-width: 0.5; } .label { font: 150%/1.9 arial, helvetica, sans-serif; fill:#2A4B59; } .lland { font: 55%/0.2 arial, helvetica, sans-serif; fill:#CCE7D4; } .lsea { font: 55%/0.2 arial, helvetica, sans-serif; fill:#2A4B59; } .circle { opacity: 0; fill-opacity: 1; stroke: black; stroke-width: 0.5; stroke-opacity: 1; } path:hover { fill: #13bdca; } </style> <g id="map-matrix" transform="matrix(1 0 0 1 0 0)" > <g id="Plan" onclick="fill_contact(evt)"> <path id="SZ" onmouseover="displayName('Swaziland')" onmouseout="displayName('')" class="land sz" d="M466.64,482.677c0.552,0.721,1.012,1.263,1.012,2.165c0,0.429,0,0.721-0.185,1.081c-0.068,0.158-0.298,0.113-0.367,0.271 c-0.184,0.383-0.023,0.676-0.091,1.082c-0.139,0.834-0.415,1.309-0.554,2.165c-0.573,0.856-1.171,1.668-1.933,2.345 c-0.365,0.316-0.597,0.722-1.103,0.722c-1.219,0-1.907-0.27-3.126-0.27c-0.367,0-0.597,0.157-0.92,0.27l-2.298-5.412 c0.23-0.563,0.573-0.878,0.826-1.442c0.232-0.52,0.253-0.902,0.46-1.443c0.229-0.654,0.598-0.946,1.104-1.442 c0.598-0.587,0.874-1.038,1.197-1.805c0.115-0.271,0.091-0.497,0.275-0.721c0.298-0.361,0.689-0.43,1.103-0.632 c0.275-0.135,0.414-0.36,0.736-0.36c0.368,0,0.506,0.36,0.736,0.631c0.343,0.405,0.621,0.608,1.009,0.992 c0.255,0.247,0.277,0.519,0.555,0.721C465.628,482.022,466.134,482.181,466.64,482.677z"/> <path id="ZA" onmouseover="displayName('South Africa')" onmouseout="displayName('')" class="land sa" d="M441.167,501.166c-0.942,1.173-2.115,1.195-3.589,1.625c-0.804,0.224-1.355,0.315-2.021,0.81c-0.414,0.318-0.507,0.678-0.828,1.082 c-0.207,0.271-0.482,0.294-0.735,0.541c-0.988,0.97-1.473,1.625-2.115,2.797c-0.254,0.475-0.346,0.813-0.643,1.264 c-0.461,0.698-1.059,0.924-1.841,1.263c-0.735,0.314-1.08,0.653-1.838,0.901c0.389,0.384,0.758,0.406,1.195,0.722 c0.85,0.608,1.057,1.285,1.656,2.164c0.298,0.43,0.618,0.608,1.01,0.992c0.782,0.768,1.288,1.15,2.206,1.713 c0.393,0.227,0.714,0.36,1.104,0.634c0.229,0.156,0.345,0.449,0.645,0.449c0.367,0,0.391-0.405,0.551-0.723 c0.254-0.471,0.529-0.697,0.92-1.082c0.506-0.494,0.92-0.765,1.563-1.082c1.265-0.607,2.07-0.878,3.312-1.532 c1.127-0.587,1.61-1.263,2.391-2.255c0.23-0.315,0.528-0.36,0.828-0.631c0.367-0.316,0.552-0.632,0.92-0.993 c0.551-0.54,1.104-0.924,1.104-1.714c0-0.337-0.367-0.451-0.644-0.63c-0.528-0.361-0.942-0.497-1.472-0.812 c-0.714-0.429-1.334-0.678-1.655-1.445c-0.276-0.676-0.161-1.193-0.369-1.893C442.568,502.407,441.604,502.024,441.167,501.166 L441.167,501.166z M381.115,472.575L381.115,472.575c0.276,0.384,0.459,0.563,0.827,0.902c0.115,0.088,0.275,0.067,0.368,0.18 c0.414,0.476,0.575,0.902,0.919,1.443c0.254,0.429,0.575,0.63,0.828,1.083c0.712,1.263,0.828,2.163,1.012,3.607 c0.161,1.419,0.552,2.188,0.552,3.606c0,0.315-0.275,0.43-0.366,0.722c-0.116,0.339-0.093,0.542-0.093,0.903 c0,0.834,0.574,1.239,0.919,1.983c0.229,0.496,0.344,1.173,0.92,1.173c0.782,0,1.24-0.271,2.022-0.271 c0.873,0,1.356,0.36,2.231,0.36h1.816c0.274-0.541,0.343-0.925,0.643-1.443c0.276-0.45,0.781-0.473,1.104-0.902 c0.366-0.495,0.274-1.06,0.643-1.533c0.483-0.608,1.149-0.541,1.84-0.901c0.62-0.316,0.874-0.676,1.379-1.173 c0.529-0.519,0.942-0.766,1.38-1.353c0.62-0.813,0.965-1.397,1.747-2.074c0.206-0.182,0.345-0.451,0.645-0.451 c0.159,0,0.229,0.157,0.366,0.18h2.276c1.356,0,2.069,0.384,3.427,0.541c1.47,0.182,2.298-0.135,3.77-0.088 c1.725,0.044,2.69,0.359,4.414,0.359c0.553,0,0.851-0.225,1.381-0.359c0.457-0.114,0.759-0.203,1.194-0.363 c1.31-0.517,2.184-1.082,2.76-2.343c0.321-0.7,0.458-1.084,0.734-1.805c0.091-0.271,0.091-0.519,0.277-0.722 c0.183-0.203,0.46-0.181,0.734-0.272c0.759-0.27,1.15-0.675,1.84-1.08c0.873-0.519,1.172-1.129,1.839-1.895 c1.188-1.331,2.432-1.761,3.142-3.227c-0.011-0.131-0.017-0.254-0.017-0.382c0-1.487,0.179-2.734,1.381-3.607 c0.478-0.347,0.965-0.298,1.563-0.45c1.081-0.275,1.47-0.972,2.299-1.715c1.057-0.946,2.074-1.101,2.85-2.253 c0.604-0.899,0.896-1.674,1.932-2.076c1.172-0.454,2.049-0.199,3.128-0.811c1.105-0.628,1.929-0.636,3.126-1.082 c0.818-0.306,1.13-0.995,1.888-1.142c0.095-0.019,0.212-0.032,0.319-0.032c0.347,0,0.484,0.326,0.828,0.361 c1.61,0.166,2.528,0.184,4.139,0.36c0.644,0.071,0.942,0.517,1.563,0.632c3.338,0.619,5.435,0.537,8.484,0.98l-0.007-0.001 c0.62,1.512,0.812,2.943,1.271,4.521c0.276,0.946,0.069,1.535,0.185,2.525c0.092,0.858,0.254,1.331,0.458,2.166 c0.163,0.698,0.323,1.105,0.461,1.804c0.139,0.676,0.229,1.104,0.276,1.804c0.045,0.563-0.138,0.879-0.092,1.441 c0.092,1.264,0.322,1.965,0.322,3.226v3.99l-0.322,5.052c-0.506-0.496-1.012-0.654-1.563-1.083c-0.277-0.202-0.3-0.474-0.555-0.721 c-0.388-0.384-0.666-0.587-1.009-0.992c-0.23-0.271-0.368-0.631-0.736-0.631c-0.322,0-0.461,0.226-0.736,0.36 c-0.413,0.202-0.805,0.271-1.103,0.632c-0.185,0.224-0.16,0.45-0.275,0.721c-0.323,0.767-0.6,1.218-1.197,1.805 c-0.506,0.496-0.874,0.788-1.104,1.442c-0.207,0.541-0.228,0.924-0.46,1.443c-0.253,0.564-0.596,0.88-0.826,1.442l2.298,5.412 c0.323-0.112,0.553-0.27,0.92-0.27c1.219,0,1.907,0.27,3.126,0.27c0.506,0,0.737-0.405,1.103-0.722 c0.762-0.677,1.359-1.488,1.933-2.345c1.933,0.632,3.325,0.711,5.349,1.027c-0.021,0.156-0.046,0.319-0.106,0.505 c-0.471,1.466-0.541,2.437-1.471,3.653c-0.818,1.07-0.876,1.929-1.149,3.248c-0.334,1.601-0.932,2.391-1.703,3.834 c-0.264,0.505-0.344,0.855-0.689,1.306c-0.838,1.105-1.77,1.319-3.034,1.939c-0.413,0.204-0.518,0.507-0.92,0.722 c-1.034,0.564-1.585,0.97-2.621,1.533c-0.562,0.305-1.021,0.282-1.471,0.722c-0.298,0.294-0.276,0.633-0.552,0.947 c-0.402,0.463-0.874,0.574-1.148,1.127c-0.404,0.801-0.335,1.376-0.645,2.209c-0.518,1.377-0.897,2.11-1.563,3.429 c-0.84,1.646-1.484,2.3-2.347,3.833c-0.642,1.138-0.999,1.827-1.839,2.842c-0.379,0.461-0.494,0.845-1.011,1.172 c-1.794,1.127-2.887,1.601-4.69,2.705c-1.668,1.016-2.196,2.074-3.725,3.292c-0.771,0.609-1.184,0.992-1.931,1.624 c-2.321,1.984-3.576,3.123-6.115,4.824c-1.071,0.71-1.736,0.971-2.852,1.625c-0.587,0.338-0.851,0.631-1.471,0.901 c-0.541,0.226-0.691,0.609-1.149,0.947c-1.023,0.744-1.634,1.488-2.921,1.488c-0.678,0-1.069-0.136-1.748-0.136 c-0.85,0-1.299,0.361-2.149,0.361h-1.217c-0.633,0-0.988-0.226-1.621-0.226c-0.759,0-0.622,1.353-1.38,1.353 c-1.104,0-1.713-0.102-2.805-0.271c-0.322-0.044-0.448-0.359-0.782-0.359c-0.54,0-0.931,0.213-1.241,0.63 c-0.035,0.136,0,0.271,0,0.417c0,0.34,0.08,0.518,0,0.857c-1.091,0-1.702-0.013-2.792-0.013c-1.762,0-2.574-1.216-4.336-1.216 c-0.699,0-0.977,0.461-1.655,0.676c-0.93,0.305-1.494,0.315-2.459,0.315c-0.967,0-1.54,0.012-2.461-0.27 c-0.31-0.092-0.448-0.361-0.781-0.361c-0.77,0-1.196,0.315-1.885,0.631c-0.494,0.225-0.759,0.463-1.288,0.586 c-0.458,0.114-0.771,0.034-1.194,0.227c-0.333,0.146-0.368,0.461-0.69,0.63c-1.172,0.643-1.988,0.902-3.334,0.902 c-0.621,0-0.977,0.022-1.586-0.09c-0.345-0.056-0.518-0.271-0.875-0.271c-0.47,0-0.665,0.328-1.056,0.589 c-0.334,0.213-0.563,0.28-0.921,0.45c-0.159,0.078-0.194,0.271-0.378,0.271h-1.265c-0.265,0-0.393-0.182-0.656-0.182 c-1.275,0-1.575,1.579-2.851,1.579c-0.528,0-0.815-0.237-1.333-0.315c-0.76-0.125-1.333-0.146-1.839-0.723 c-0.563-0.641-0.978-0.912-1.516-1.577c-0.336-0.418-0.646-0.768-1.198-0.768c-0.264,0-0.426,0.091-0.688,0.091 c-0.323,0-0.69,0.102-0.829-0.18c-0.216-0.44,0.012-0.802-0.184-1.264c-0.092-0.214-0.368-0.169-0.599-0.225 c-0.274-0.068-0.4-0.227-0.688-0.227c-0.494,0-0.794,0.361-0.965,0.813c-0.495-0.485-0.347-1.025-0.461-1.714 c-0.127-0.744-0.759-0.98-0.873-1.714c-0.092-0.563,0.092-0.936-0.048-1.488c-0.172-0.698-0.47-1.048-0.919-1.623 c-0.332-0.43-0.77-0.508-1.01-0.993c-0.357-0.709-0.128-1.24-0.185-2.028h-0.828v-0.543c0-0.078,0.093-0.111,0.093-0.191 c0-0.248,0.046-0.383,0.046-0.631c0-0.528-0.209-0.98,0.184-1.341c0.459-0.429,1.035-0.463,1.287-1.038 c0.528-1.194,0.734-1.973,0.734-3.27c0-1.531-0.389-2.423-1.148-3.765c-0.815-1.443-1.138-2.345-2.022-3.742 c-0.403-0.644-0.805-0.881-1.195-1.534c-0.633-1.07-0.839-1.747-1.288-2.887c-0.942-2.379-1.253-3.799-2.298-6.132 c-0.449-1.005-0.322-1.715-0.829-2.707c-0.254-0.495-0.494-0.732-0.735-1.218c-0.104-0.202-0.057-0.416-0.231-0.586 c-0.425-0.416-0.964-0.598-0.964-1.185c0-0.325,0.045-0.518,0.045-0.844c0-0.181-0.033-0.271-0.045-0.451v-1.14 c0-0.168,0.173-0.225,0.321-0.304c0.782-1.873,0.921-4.06,2.989-4.06c1.012,0,1.809,0.612,2.115,1.534 c0.405,1.22-0.117,2.392,0.92,3.156c0.917,0.678,1.795,0.354,2.942,0.543c1.197,0.195,1.726,1.082,2.942,1.082 c1.196,0,1.84-0.633,3.035-0.633c0.804,0,1.219,0.541,2.022,0.541c0.807,0,0.828-0.99,1.38-1.533 c0.988-0.97,1.955-1.353,3.356-1.353c0.689,0,1.251,0.053,1.787,0.174L381.115,472.575z"/> <path id="LS" onmouseover="displayName('Lesotho')" onmouseout="displayName('')" class="land ls" d="M441.167,501.166c-0.942,1.173-2.115,1.195-3.589,1.625c-0.804,0.224-1.355,0.315-2.021,0.81c-0.414,0.318-0.507,0.678-0.828,1.082 c-0.207,0.271-0.482,0.294-0.735,0.541c-0.988,0.97-1.473,1.625-2.115,2.797c-0.254,0.475-0.346,0.813-0.643,1.264 c-0.461,0.698-1.059,0.924-1.841,1.263c-0.735,0.314-1.08,0.653-1.838,0.901c0.389,0.384,0.758,0.406,1.195,0.722 c0.85,0.608,1.057,1.285,1.656,2.164c0.298,0.43,0.618,0.608,1.01,0.992c0.782,0.768,1.288,1.15,2.206,1.713 c0.393,0.227,0.714,0.36,1.104,0.634c0.229,0.156,0.345,0.449,0.645,0.449c0.367,0,0.391-0.405,0.551-0.723 c0.254-0.471,0.529-0.697,0.92-1.082c0.506-0.494,0.92-0.765,1.563-1.082c1.265-0.607,2.07-0.878,3.312-1.532 c1.127-0.587,1.61-1.263,2.391-2.255c0.23-0.315,0.528-0.36,0.828-0.631c0.367-0.316,0.552-0.632,0.92-0.993 c0.551-0.54,1.104-0.924,1.104-1.714c0-0.337-0.367-0.451-0.644-0.63c-0.528-0.361-0.942-0.497-1.472-0.812 c-0.714-0.429-1.334-0.678-1.655-1.445c-0.276-0.676-0.161-1.193-0.369-1.893C442.568,502.407,441.604,502.024,441.167,501.166z"/> <path id="MG" onmouseover="displayName('Madagascar')" onmouseout="displayName('')" class="land coast mg" d="M582.236,467.705c-0.495,0.98-0.645,1.578-1.012,2.615c-0.345,0.971-0.862,1.375-1.334,2.3c-0.804,1.578-1.115,2.47-2.07,3.969 c-1.091,1.713-1.712,2.627-3.034,4.148c-0.666,0.766-1.115,1.139-1.838,1.848c-0.807,0.791-1.356,1.489-2.495,1.489h-0.989 c-0.24,0-0.378-0.09-0.621-0.09c-0.632,0-1-0.045-1.632-0.045c-1.552,0-2.402,0.496-3.735,1.308 c-0.689,0.417-0.92,1.128-1.725,1.128c-0.334,0-0.517-0.09-0.85-0.09c-0.656,0-1.022,0.225-1.681,0.225 c-0.527,0-0.735-0.451-0.986-0.902c-0.266-0.474-0.655-0.585-1.014-0.992c-0.574-0.652-0.884-1.138-1.699-1.487 c-0.311-0.136-0.735-0.147-0.735-0.485v-1.183c-0.794-0.778-1.668-0.789-2.255-1.715c-0.344-0.54-0.321-0.969-0.321-1.611v-0.97 c0-0.396,0.253-0.834-0.091-1.026c-0.265-0.146-0.507-0.213-0.599-0.496c-0.139-0.428-0.139-0.711-0.139-1.172 c0-0.599,0.114-0.937,0.185-1.533l1.012-5.119c0-1.432-0.598-2.164-1.149-3.495c-0.448-1.07-0.379-1.781-0.598-2.931 c-0.184-0.992-0.506-1.511-0.506-2.515v-1.195c0-0.462,0.184-0.699,0.229-1.162c0.069-0.642-0.24-1.194,0.23-1.622 c0.473-0.429,0.816-0.621,1.196-1.128c0.437-0.597,0.84-0.856,1.241-1.488c0.367-0.586,0.518-1.06,1.104-1.442 c0.506-0.339,0.977-0.339,1.288-0.857c0.425-0.7,0.38-1.229,0.78-1.938c0.311-0.554,0.782-0.677,1.104-1.219 c0.196-0.326,0.208-0.552,0.369-0.901c0.481-1.037,0.827-1.623,1.516-2.525c0.473-0.62,1.059-0.924,1.059-1.703v-0.957 c0.218-1.296,0.598-1.95,0.598-3.248c0-1.035-0.275-1.61-0.275-2.648v-0.925c0-2.141-0.826-3.28-0.826-5.422 c0-0.881,0.55-1.31,0.55-2.188c0-0.439-0.506-0.599-0.506-1.038c0-0.845,0.115-1.318,0.184-2.164v-1.545 c0-1.771,0.714-2.718,1.472-4.317c0.321-0.698,0.702-1.017,1.059-1.715c0.437-0.855,0.918-1.342,0.918-2.3 c0-0.417-0.228-0.62-0.228-1.036c0-0.406,0.32-0.768,0.733-0.768c0.161,0,0.231,0.157,0.368,0.226 c0.461,0.226,0.781,0.315,1.299,0.315h1.172c0.506,0,0.497-0.631,0.842-0.992c0.286-0.303,0.538-0.439,0.78-0.767 c0.103-0.136,0.242-0.225,0.414-0.225c0.518,0,0.586,0.722,1.104,0.722c0.505,0,0.727-0.316,1.196-0.497 c0.563-0.213,1.092,0.013,1.517-0.405c0.195-0.191,0.047-0.441,0.047-0.723c0.654-0.09,1.011-0.27,1.665-0.27h1.311 c0.161,0,0.265-0.09,0.426-0.09c0.437,0,0.322,0.607,0.367,1.036c0.058,0.52,0.357,0.745,0.646,1.174 c0.457-0.563,0.273-1.082,0.364-1.804c0.082-0.677,0.427-0.971,0.737-1.58c0.437-0.867,1.172-1.002,2.021-1.488 c0.347-0.189,0.588-0.28,0.922-0.494c0.286-0.192,0.438-0.452,0.793-0.452h0.402c0.093,0.767,0.413,1.579,1.194,1.579 c0.587,0,0.782-0.687,0.782-1.264c0-0.361-0.23-0.54-0.23-0.901c0-0.867,0.577-1.251,0.967-2.029 c0.403-0.79,0.621-1.489,1.471-1.759c0.115,0.158,0.14,0.294,0.14,0.496c0,0.698-0.323,1.06-0.323,1.759 c0.447-0.045,0.863,0.113,1.15-0.225c0.185-0.227,0.147-0.475,0.229-0.766c0.127-0.465,0.22-0.858,0.644-1.084 c0.253-0.136,0.643-0.08,0.643-0.361c0-0.553-0.55-0.754-0.55-1.308c0-0.315,0.228-0.473,0.413-0.723 c0.62-0.821,1.494-0.866,2.551-0.946v-1.07c0-1.07-0.435-1.646-0.435-2.718c0-0.519,0.413-0.745,0.413-1.263 c0-0.315-0.14-0.496-0.14-0.811c0-0.553,0.633-0.813,1.197-0.813c0.609,0,0.965,0.395,1.286,0.901 c0.138,0.226,0.048,0.633,0.322,0.633c0.311,0,0.46-0.181,0.735-0.316c0.311-0.147,0.599-0.214,0.782-0.496 c0.185-0.281,0.185-0.552,0.459-0.768c0.103,0.136,0.14,0.36,0.323,0.36c0.598,0,1.207-0.111,1.38-0.675 c0.161-0.552,0.079-0.914,0.091-1.489c0.012-0.372,0.265-0.54,0.461-0.855c0.391-0.643,0.344-1.174,0.344-1.929v-3.395 c0.345,0.228,0.482,0.587,0.896,0.587c1.355,0,1.541-1.803,2.897-1.803c0.253,0.507,0.091,0.856,0.322,1.352 c0.206,0.451,0.771,0.315,1.104,0.677c0.425,0.451,0.597,0.868,0.688,1.488c0.058,0.395-0.023,0.779,0.321,0.992 c0.346,0.216,0.737,0.204,0.876,0.587c0.137,0.394,0.137,0.665,0.229,1.082c0.184,0.778,0.139,1.273,0.368,2.028 c0.311,0.981,1.057,1.264,1.563,2.165c0.461,0.813,0.229,1.478,0.229,2.414c0,1.216-0.276,1.893-0.276,3.109 c0,0.813,1.037,1.005,1.037,1.816v3.855c0,1.443-0.303,2.244-0.303,3.687c0,0.338,0.14,0.519,0.14,0.857 c0,0.958-0.528,1.398-0.874,2.299c-0.206,0.541-0.527,0.79-0.688,1.354c-0.082,0.293-0.104,0.677-0.416,0.677 c-0.274,0-0.321-0.304-0.506-0.495c-0.458-0.485-0.93-0.654-1.239-1.264c-0.301-0.587-0.393-1.308-1.059-1.308 c-0.425,0-0.633,0.271-1.059,0.271v0.688c0,0.597,0.461,0.878,0.461,1.477c0,0.619-0.506,0.9-0.506,1.521 c0,0.147-0.047,0.271-0.047,0.417c-0.139,1.625-0.264,2.515-0.643,4.104c-0.312,1.297-0.921,1.884-1.655,2.977 c-0.264,0.395-0.827,0.429-0.827,0.901c0,0.192,0.194,0.271,0.229,0.451c0.08,0.439,0.045,0.698,0.045,1.15 c0,1.668-0.414,2.672-1.333,4.081c-0.265,0.417-0.321,0.755-0.645,1.128c-0.655,0.755-0.862,1.318-1.195,2.255 c-0.276,0.756-0.285,1.252-0.643,1.985c-0.276,0.563-0.577,0.788-0.921,1.307c-0.322,0.474-0.298,0.893-0.551,1.397 c-0.563,1.116-0.851,1.815-1.103,3.067c-0.243,1.453-0.773,2.13-1.104,3.563c-0.46,1.951-0.852,2.999-1.519,4.871 c-0.239,0.676-0.506,1.015-0.734,1.713c-0.243,0.732-0.425,1.139-0.782,1.804c-0.517,0.958-0.645,1.589-1.104,2.571 c-0.826,1.746-1.252,2.762-1.977,4.555c-0.218,0.552-0.574,0.812-0.69,1.396c-0.148,0.723-0.091,1.172-0.367,1.85 c-0.873,2.086-1.609,3.168-2.483,5.231c-0.321,0.777-0.711,1.184-0.781,2.028L582.236,467.705z"/> </g> <g id="Label_land" class="lland" > <text transform="matrix(1 0 0 1 380.0918 520.9473)">South Africa</text> <text transform="matrix(1 0 0 1 561.8945 442.4131)">Madagascar</text> </g> <g id="Label_sea" class="lsea"> <text transform="matrix(1 0 0 1 459.1904 520.9473)">Lesotho</text> <text transform="matrix(1 0 0 1 476.6943 496.3545)">Swaziland</text> </g> </g> <text class="label" id="country_id" x="10" y="500"> </text> </svg> </div> </div> <!-- end DataPage --> </div><!-- end Holder --> <script>//<![CDATA[ var transMatrix = [1,0,0,1,0,0]; function init(evt) { if ( window.svgDocument == null ) { svgDocument = evt.target.ownerDocument; } mapMatrix = svgDoc.getElementById("map-matrix"); width = evt.target.getAttributeNS(null, "width"); height = evt.target.getAttributeNS(null, "height"); } function displayName(country_name) //display mouse_over event { document.getElementById('country_id').firstChild.data = country_name; } function fill_contact(evt) //display click event { var country_id = evt.target.id document.getElementById('country_name').firstChild.data = country_id } //]]> </script> </body> <html>
Теперь просто написать функцию для вызова данных с помощью XMLHttpRequest. Здесь используется другой метод
благодаря