PDA

View Full Version : Creating an svg with javascript



keyboard
08-13-2012, 10:36 PM
This text is invisible....

This code is now pointless and as such, I've removed it... See me post below


↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

sorta

keyboard
08-15-2012, 09:40 AM
Update -

Somehow, I've actually managed to get it working... I've got no clue how


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<html>
<head>
<script type="text/ecmascript">
var errormessages = "true";
function changeText() {
document.getElementById('n1').textContent = "This is the text";
document.getElementById('n2').textContent = "";
document.getElementById('n3').textContent = "";
var svgtext = document.getElementById("firstText");
var searchtext = document.getElementById('search').value;
if(searchtext.length == 0) {
if(errormessages == "true") {
document.getElementById('error').innerHTML = "Please enter a value";
}
return;
}
if(svgtext.textContent.search(searchtext) == -1) {
if(errormessages == "true") {
document.getElementById('error').innerHTML = "No matches found";
}
return;
}
var svgtextsplit = svgtext.textContent.split(searchtext);
if(svgtextsplit.length > 2) {
document.getElementById('error').innerHTML = svgtextsplit.length - 1;
for(counter=2;counter < svgtextsplit.length;counter++) {
document.getElementById('error').innerHTML = "l";
var tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan.setAttribute("fill","red");
var myText = document.createTextNode(searchtext);
tspan.appendChild(myText);
document.getElementById('firstText').appendChild(tspan);
var tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
var myText = document.createTextNode(svgtextsplit[counter]);
tspan.appendChild(myText);
document.getElementById('firstText').appendChild(tspan);
}
} else {
document.getElementById('error').innerHTML = "bi";

}
document.getElementById('n1').textContent = svgtextsplit[0];
document.getElementById('n2').textContent = searchtext;
document.getElementById('n3').textContent = svgtextsplit[1];
}
</script>
</head>
<body>
<input type="text" id="search" />
<input type="button" value="Search" onclick="changeText()"/>
<br /><br />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<g id="firstGroup">
<text x="20" y="45" style="font-size:50px;" id="firstText"><tspan id="n1">This is the text</tspan><tspan id="n2" fill="red"></tspan><tspan id="n3"></tspan></text>
</g>
</svg>
<div id="error"></div>
<body>
</html>

Any comments?

EDIT -
After a bit of testing, if you continuelsy click search, (or just search lots), it starts writing out new text.... any tips on how to get round this?