displaying data from sql from clicking on svg map - javascript
I have a svg map embedded into a php page:
<!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>
I got the map from Peter Collingridge's website ..http://www.petercollingridge.co.uk/sites/files/peter/Blank%20map%20display%20names.svg. (Brilliant tutorial on SVG).
On the onclick event I need to display the country name I just clicked on the left panel and then I need to get data from a mysql database and display it under that as in Rep name and other data. Is there any tutorials on this or can someone direct me to where I can get help.
Ive been searching for 4 days for my solution. Perhaps someone can help.
Thanks
Ok got something working... communication between embedded svg and main php is not easy so I put the whole svg into the php. Like this:
<!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>
Now just to write a function to call the data with a XMLHttpRequest.
Another method is used here
Thanks
Related
How can I loop through path elements in SVG?
I am getting TypeError: logo[i].getTotalLength is not a function error while trying to mesure the length of each <path> of the <svg> tag!
I got that error using jquery :
jQuery('#logo').each(function(i) {
console.log( i + ' ====' + jQuery(this).get(0).getTotalLength());
});
So I rewrote the same code in javascript but I still get the same error!
javascript code :
const logo= document.querySelectorAll("#logo");
for (let i=0; i < logo.length; i++)
{
console.log(i," ==== ",logo[i].getTotalLength());
}
Note: in this html code there is only 1 <path> , I removed the others because they are very large!
html code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color: black;">
<svg id="logo" width="80" height="90" viewBox="0 0 80 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.56 3.24001C41.36 3.24001 49.08 4.96001 55.72 8.40001C62.44 11.84 67.6 16.76 71.2 23.16C74.88 29.48 76.72 36.84 76.72 45.24C76.72 53.64 74.88 61 71.2 67.32C67.6 73.56 62.44 78.4 55.72 81.84C49.08 85.28 41.36 87 32.56 87H3.28V3.24001H32.56ZM31.96 72.72C40.76 72.72 47.56 70.32 52.36 65.52C57.16 60.72 59.56 53.96 59.56 45.24C59.56 36.52 57.16 29.72 52.36 24.84C47.56 19.88 40.76 17.4 31.96 17.4H20.08V72.72H31.96Z" stroke="white" stroke-width="6"/>
</svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
When i removed id="logo" from the <svg> tag and add it to the <path> it work perfectly fine!
So the loop doesn't work properly!
If you want to loop through all the elements with a particular tag name then there's a function that will get all of them: getElementsByTagName.
You were getting the parent <svg> element and there's only one of them. You could iterate through its children and find the path elements but why bother given there's an easier way to do it.
const logo= document.getElementsByTagName("path");
for (let i=0; i < logo.length; i++)
{
console.log(i," ==== ",logo[i].getTotalLength());
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color: black;">
<svg id="logo" width="80" height="90" viewBox="0 0 80 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.56 3.24001C41.36 3.24001 49.08 4.96001 55.72 8.40001C62.44 11.84 67.6 16.76 71.2 23.16C74.88 29.48 76.72 36.84 76.72 45.24C76.72 53.64 74.88 61 71.2 67.32C67.6 73.56 62.44 78.4 55.72 81.84C49.08 85.28 41.36 87 32.56 87H3.28V3.24001H32.56ZM31.96 72.72C40.76 72.72 47.56 70.32 52.36 65.52C57.16 60.72 59.56 53.96 59.56 45.24C59.56 36.52 57.16 29.72 52.36 24.84C47.56 19.88 40.76 17.4 31.96 17.4H20.08V72.72H31.96Z" stroke="white" stroke-width="6"/>
</svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Window.getComputedStyle does not show inline style
I have simple html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg id="svg" viewBox="0 0 594 600" preserveAspectRatio="xMinYMin meet">
<rect id="rect" fill="#98df8a" style="width: 100px; height: 100px;">
</rect>
</svg>
</body>
</html>
When i use: window.getComputedStyle(document.getElementById('rect')), I get the value of both width and height to be auto and not 100px like what I expected.
Is this how it should be? If so, how can i make it to return 100px ?
I need this function to turn all my styles defined in the external css into inline style attribute for svg elements so that I can export it later.
You could just use document.getElementById('rect').style.height and document.getElementById('rect').style.width and if you want to handle an arbitrary list of styles something like this:
var exportStyleKeys = ['width', 'height'];
var rect = document.getElementById('rect');
var exportStyles = exportStyleKeys.reduce((styles, styleKey) => {
styles[styleKey] = rect.style[styleKey];
return styles;
}, {});
JSFiddle
window.document.getElementById('rect').style.width will return you the inline css width attribute.
Try the blow code
var rect = window.document.getElementById('rect');
console.log(rect.style.width);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg id="svg" viewBox="0 0 594 600" preserveAspectRatio="xMinYMin meet">
<rect id="rect" fill="#98df8a" style="width: 100px; height: 100px;">
</rect>
</svg>
</body>
</html>
Integer input to SVG color changing with no submit
I am a newbie to coding trying to create a JS where the input is integer(that is either 1, 2 or 3) with no Submit button.
It should instantly convert the circle's color or "Fill" into (1=Red, 2=Green & 3=Blue).
Thanks Alot!
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
if (document.getElementById("Color").value == 1)
{Green";}
else if (document.getElementById("Color").value == 2)
{"Red";}
else if (document.getElementById("Color").value == 3)
{"Blue";}
}
</script>
</head>
<body>
<svg id = 9589 height="100" width="100">
<line x1="50" y1="50" x2="1000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
<svg height="100" width="100">
<circle cx="50" cy="50" r="30" stroke="black" stroke-width="3" fill="myFunction()" />
</svg>
</svg>
<br>
<b>Color<b> <br>
<input type="integer" id="Color">
</body>
</html>
Demo
JSFIDDLE
Code
<!DOCTYPE html>
<head>
<title>Serviced Bins</title>
<style>
div {
width: 120px;
height: 120px;
display: inline-block;
margin-left: 1px;
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
</head>
<body>
<br>
<b>Enter # of Circles<b>
<br>
<input type="integer" id="circles">
</b></b>
<form>
<div id="Participentfieldwrap">
<svg height="100" width="200">
<line x1="0" y1="50" x2="100000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
<svg height="100" width="100">
<circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
</svg>
</svg>
<br>
<b>Color<b>
<br>
<input type="integer" id="Color" onkeyup="myFunction(this)">
</b></b>
<script>
//Inputing integer 1, 2 or 3 which instantly applies color formatting (RGB) to circle in the same div
function myFunction(val) {
var val1=val.id.substring(val.id.indexOf("_")+1,val.id.length)
var cir = document.getElementById("cir_"+val1);
var into = document.getElementById("Color_"+val1);
val=into.value;
if(val*1 == 1)
cir.style.fill = "green";
else if(val*1 == 2)
cir.style.fill = "red";
else if(val*1 == 3)
cir.style.fill = "blue";
else cir.style.fill = "Yellow";
}
</script>
</div>
</form>
<script type="text/javascript">
//Loop for creating multiple divs in a form using a limit that is set in an integer input
var participantsField = document.getElementById("Participentfieldwrap"),
form = document.getElementsByTagName("form")[0],
ContestantNum = document.getElementById("circles"),
i, timer;
function createCircles(val) {
// Removing previous circles
while (form.firstChild) {
form.removeChild(form.firstChild);
}
for(i = 1; i <= val; i++) {
var clone = participantsField.cloneNode(true);
clone.id = "Participentfieldwrap_" + i;
clone.querySelector("input").id = "Color_" + i;
clone.querySelector("circle").id = "cir_" + i;
form.appendChild(clone);
}
}
ContestantNum.addEventListener('keydown', function(e) {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
createCircles(ContestantNum.value);
}, 800);
});
</script>
</body>
</html>
this help you :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg id = 9589 height="100" width="100">
<line x1="50" y1="50" x2="1000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
<svg height="100" width="100">
<circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
</svg>
</svg>
<br>
<b>Color<b>
<br>
<input type="integer" id="Color">
</b></b>
<script>
var cir = document.getElementById("cir");
var into = document.getElementById("Color");
into.addEventListener("keyup",myFunction,false);
function myFunction() {
if (document.getElementById("Color").value == 1)
cir.style.fill = "green";
else if (document.getElementById("Color").value == 2)
cir.style.fill = "red";
else if (document.getElementById("Color").value == 3)
cir.style.fill = "blue";
}
</script>
</body>
</html>
Unable to getElementById within external SVG File
Make sure the svg is an external file for object tag to reference. For some reason I am not able to get the "Layer_1" by id. I can get the svgElem and svgDoc , but not "Layer_1" by its id within the svg file.
(function($) {
$(window).load(function() {
var svgElem = document.getElementById("test-svg"); //returns value
alert("svgElem=" + svgElem); //returns value
var svgDoc = svgElem.contentDocument;
alert("svgDoc = " + svgDoc); //returns value when svg external file
var layer1 = svgDoc.getElementById("Layer_1");
alert("layer1 = " + layer1); //returns null* This is my problem.
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<div id="container">
<div id="container2">
<object id="test-svg" type="image/svg+xml" data="svg-layer-test.svg">
<!-- PLEASE MAKE THIS SVG AN EXTERNAL DOCUMENT and name file 'svg-layer-test.svg'-->
<!--<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 91.333 70.667" enable-background="new 0 0 91.333 70.667" xml:space="preserve">
<g id="Layer_1">
<text transform="matrix(1 0 0 1 -4.333 68.6665)" font-family="'TimesNewRomanPS-BoldMT'" font-size="100" id="first_date">13</text>
</g>
<g id="Layer_2">
<text transform="matrix(1 0 0 1 -4.333 68.6665)" font-family="'TimesNewRomanPS-BoldMT'" font-size="100">15</text>
</g>
</svg>-->
</object>
</div>
</div>
</body>
</html>
Call JavaScript function inside SVG from Surrounding HTML
I've created a little page just as this one here:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function test() {
executeAnimation();
}
</script>
</head>
<body>
<h1>Tester</h1>
<embed src="test.svg" type="image/svg+xml" />
<hr />
<input type='button' value='Test' onclick='test()' />
</body>
</html>
The test.svg looks like this:
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg id="testSvgId" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="950" height="900">
<title>Title</title>
<desc>Desc</desc>
<defs>
<script type="text/javascript">
<![CDATA[
function executeAnimation () {
document.getElementById('anim').beginElement();
}
]]>
</script>
</defs>
<ellipse cx="500" cy="1090" rx="600" ry="0" fill="rgb(94,114,54)">
<animate id="anim" attributeType="XML" attributeName="ry" begin="indefinite" dur="2s" from="0" to="350" fill="freeze" />
</ellipse>
</svg>
As you can see, I want to call from JavaScript in the HTML page the function executeAnimation() which is defined insite the SVG image. This actually does not work.
I also tried this:
<svg onload='onloadFunction()'...>
...
function onloadFunction() {
alert('i am loading');
window.executeAnimation = executeAnimation();
}
This was suggested in another forum, but this did also not work (window.executeAnimation was undefined from outside).
What would be the real correct way to do this?
Without seeing the source of your .svg, it's impossible to answer specifically...
Check this out: https://codepen.io/lambdacreatives/pen/uygzk
HTML
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="77px" height="77px" viewBox="0 0 77 77" enable-background="new 0 0 77 77" xml:space="preserve">
<g>
<path id="d" fill="#ffffff" d="M49.045,61.112c2.549-1.198,4.867-2.798,6.857-4.743L36.83,13.587c-2.862,0.186-5.602,0.826-8.124,1.899
l6.448,14.465l-15.12,25.387c1.866,2.038,4.044,3.785,6.489,5.118L39.236,39.11L49.045,61.112z"/>
<path id="circle" fill="#ffffff" d="M38.457,67.2c-15.852,0-28.701-12.848-28.701-28.701c0-15.851,12.85-28.697,28.701-28.697
c5.773,0,11.137,1.72,15.639,4.653l4.605-7.702c-6.049-3.873-13.114-5.998-20.359-5.998C17.531,0.754,0.6,17.687,0.6,38.499
c0,20.813,16.932,37.746,37.742,37.746c8.438,0,16.48-2.773,23.061-7.865l-3.809-8.533C52.514,64.405,45.818,67.2,38.457,67.2z">
<animateTransform
xlink:href="#circle"
attributeName="transform"
attributeType="XML"
id="ani-circle"
type="rotate"
from="0 38.501500725746155 38.4994986653327945"
to="360 38.501500725746155 38.4994986653327945"
dur="0.3s"
begin="click"
repeatCount="1"
fill="freeze" />
</path>
</g>
</svg>
<br><br>
<button id="trigger">Trigger Animation</button>
CSS
body {
background-color: black;
text-align: center;
}
svg {
height: 100%;
width: 200px;
path {
fill: white;
}
}
JS
$( "#trigger" ).click(function() {
document.getElementById("ani-circle").beginElement();
});
If you can't work it out from that, post the source of your .svg and I'll knock up a specific answer for you.