Advanced Search

Results 1 to 2 of 2

Thread: Creating an svg with javascript

  1. #1
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,508
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default Creating an svg with javascript

    This text is invisible....

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


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

    sorta
    Last edited by keyboard; 08-15-2012 at 10:00 AM.

  2. #2
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,508
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Update -

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

    Code:
    <?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?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •