Inline SVG not rendering when created with Javascript - javascript

I am trying to programmatically create inline svg images of a row of shields.
My shield is a simple path:
<path fill="red" d="M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z"></path>
Here is my script:
const element = document.querySelector('main')
for (let i = 0; i < 10; ++i) {
element.appendChild(document.createElementNS('http:http://www.w3.org/2000/svg', 'svg'))
element.lastChild.setAttribute('width', 400)
element.lastChild.setAttribute('height', 400)
// Code to add path inside svg, removed it and still didn't work
element.lastChild.appendChild(document.createElementNS('http:http://www.w3.org/2000/svg', 'path'))
element.lastChild.lastChild.setAttribute('fill', 'red')
element.lastChild.lastChild.setAttribute('d', 'M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z')
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
main {
display: flex;
}
svg {
background-color: blue;
}
</style>
<main>
<svg>
<path fill="red" d="M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z"></path>
</svg>
</main>
</body>
</html>
Copyable code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
main {
display: flex;
}
svg {
background-color: blue;
}
</style>
<main>
<svg>
<path fill="red" d="M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z"></path>
</svg>
</main>
<script>
const element = document.querySelector('main')
for(let i = 0; i < 10; ++i) {
element.appendChild(document.createElementNS('http:http://www.w3.org/2000/svg', 'svg'))
element.lastChild.setAttribute('width', 400)
element.lastChild.setAttribute('height', 400)
// Code to add path inside svg, removed it and still didn't work
element.lastChild.appendChild(document.createElementNS('http:http://www.w3.org/2000/svg', 'path'))
element.lastChild.lastChild.setAttribute('fill', 'red')
element.lastChild.lastChild.setAttribute('d', 'M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z')
}
</script>
</body>
</html>
The first svg is being properly rendered, but my auto generated svgs are not being rendered.
Output:
Expected Output:
How do I programmatically create inline svg images of a row of shields?
Thanks in advance!
I've looked at:
JavaScript inline SVG not rendering [duplicate]: The answer given is to use createElementNS, which I'm already using.
Inline-SVG not rendering when generated by JS: Answer talks about external svg.
Inline SVG in CSS: Answers talk about data uris to embed SVG. Not what I'm doing.
img src SVG changing the styles with CSS: Answers talk about external svgs.


I can see that you are trying to create multiple SVGs, but I think it makes sense to just have on SVG and then insert all the paths in that.
I have created an array with the different sheilds (they could have more properties, here only color). And for each of them create a path. The position is controlled by the index.
const svg01 = document.querySelector('#svg01');
const shields = ['red', 'green', 'orange', 'red', 'green', 'orange', 'red', 'green', 'orange', 'red'];
shields.forEach((color,i) => {
let shield = document.createElementNS('http://www.w3.org/2000/svg', 'path');
shield.setAttribute('fill', color);
shield.setAttribute('d', 'M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z');
shield.setAttribute('transform', `translate(${i * 100 + 20} 0)`);
svg01.appendChild(shield);
});
svg {
background-color: blue;
}
<main>
<svg id="svg01" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
</svg>
</main>


SVG created as HTML tag in the DOM gets the correct namespace, no need to specify it
to prevent more NameSpacing issues, you can add SVG content as innerHTML
I used svg-path-editor to convert your Shield to relative notation,
so you don't need a translate to position it
Wrapped in a native JS Web Component <svg-shields>, so you don't have to worry about required DOM elements
customElements.define("svg-shields", class extends HTMLElement {
connectedCallback() {
let colors = this.getAttribute("colors").split(",");
this.innerHTML =
`<svg viewBox="0 0 ${colors.length*100} 100">` +
colors.map((fill, idx) => {
return `<path fill="${fill}"
d="M${ idx*100 + 20 } 0 l0 15q0 25 20 35 20-10 20-35l0-15z"/>`
}).join("\n") +
`</svg>`;
}
});
<svg-shields colors="red,green,orange,red,green,orange,red,green,orange,red">
</svg-shields>
<svg-shields colors="red,yellow,blue"></svg-shields>

Related

Aframe: Changing glTF models in Aframe using SetAttribute

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/v0.1.14/dist/aframe-orbit-controls-component.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id='earthcontainer' style='position:relative; display:flex; width: 100%; justify-content:center ;'>
<a-scene device-orientation-permission-ui='enabled: false' embedded='true' foo loading-screen='enabled:false' renderer='antialias: true; colorManagement: true; sortObjects: true; physicallyCorrectLights: true; maxCanvasWidth: 1920; maxCanvasHeight: 1920;'
style='position:absolute; height: 400px; width: 400px; margin: 0 auto;' vr-mode-ui='enabled: false'>
<a-assets>
<a-asset-item id='earth' src='https://raw.githubusercontent.com/yashrajbharti/kml-images/main/sceneearth/scene.gltf' />
<a-asset-item id='hologram' src='https://raw.githubusercontent.com/yashrajbharti/kml-images/main/scene/scene.gltf' />
</a-assets>
<a-entity camera='fov: 80; zoom: 1;' id='camera' mouse-cursor='' orbit-controls=' enableZoom: false; autoRotate: true; target: #target; enableDamping: true; dampingFactor: 0.125; rotateSpeed:0.25; minDistance:3; maxDistance:100; '
position='0 0 0'>
</a-entity>
<a-entity animation-mixer='loop: repeat' cursor='fuse: true; fuseTimeout: 500' gltf-model='#earth' id='target' position='0 0 -27.6' scale='0.4 0.4 0.4' the-target='true' />
<!-- <a-entity animation-mixer='loop: repeat' gltf-model='#hologram' id='target' position='0 0 -7.6' scale='2.4 2.4 2.4'/>-->
</a-scene>
</div>
<button class="cybr-btn">
Buttons<span aria-hidden>_</span>
<span aria-hidden class="cybr-btn__glitch">Buttons_</span>
</button>
<script>
AFRAME.registerComponent('foo', {
init: function() {
const modelList = ['earth', 'hologram']
const scaleList = ['0.4 0.4 0.4', '2.4 2.4 2.4']
const positionList = ['0 0 -27.6', '0 0 -7.6']
const model = document.getElementById("target")
const changeButton = document.querySelector(".cybr-btn")
let idx = 1 // Start with the 2nd model as 1st is already in the scene on page load
const changeModel = () => {
model.removeAttribute("gltf-model")
// Switch to next model in the list
model.setAttribute("gltf-model", `#${modelList[idx]}`)
// Change Position and Scale
model.setAttribute('position', `${positionList[idx]}`)
model.setAttribute('scale', `${scaleList[idx]}`)
idx = (idx + 1) % modelList.length
}
changeButton.onclick = changeModel
}
})
</script>
</body>
</html>
Using this solution I am able to change models in Aframe with the click of a button. Problem comes when I want to change the scale and position parameters as well.
The code to reproduce the error is added below. It results in an unexpected way of scaling and position of the glTF models.
I think I understand why this problem arise. It's because it is scaling and positioning the a-entity whichever is available, before or after the glTF parameter gets modified. Only thing is how to I solve this. I was also trying the .then{value=>} promise but it didn't help the case.

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>

displaying data from sql from clicking on svg map

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

SVG textpath via javascript not drawing

I want to generate a simple textPath. I thought this would take me 5 minutes but now it has been a few hours and I've poured over stack overflow and google to find that my implementation looks right. I'm not sure whats missing. I can get a TextNode to attach to a text container but as soon as I put the textPath on it will not render in the SVG element.
<!DOCTYPE html="">
<html>
<meta name="description" content="">
<head>
<script language="Javascript">
function drawTextPath(evt){
var mypath2 = document.createElementNS("http://www.w3.org/2000/svg","path");
mypath2.setAttributeNS(null, "id", "#path");
mypath2.setAttributeNS(null, "d","M400 50 l200 0");
mypath2.setAttributeNS(null,"fill", "none");
mypath2.setAttributeNS(null,"stroke","red");
document.getElementById("bodySVG").appendChild(mypath2);
var text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
text1.setAttributeNS(null, "fill", "blue");
text1.setAttributeNS(null,"font-size","30px");
text1.setAttributeNS(null,"x", "0");
text1.setAttributeNS(null,"y", "70");
var textpath = document.createElementNS("http://www.w3.org/2000/svg","textPath");
textpath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#path");
var ringdatenode = document.createTextNode("This is the text");
textpath.appendChild(ringdatenode);
text1.appendChild(textpath);
document.getElementById("bodySVG").appendChild(text1);
}
</script>
</head>
<body>
<p>Welcome </p>
<svg id="bodySVG" height="800" width="1500" xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="todayring" cx="100" cy="20" r="18" stroke="black" stroke-width="5" fill="orange" onclick="drawTextPath(evt);"></circle>
</svg>
</body>
</html>

You're pretty close. The id should be path and not #path though.
mypath2.setAttributeNS(null, "id", "path");
which you refer to as #path as you have done.

Categories