Jump to content

How to? Clicking a shape in an embedded SVG-image collects data from a database (using PHP), and displays the data in the very same SVG-image?


Nanonano
 Share

Recommended Posts

Ok friends: I'm totally stuck, and I desperately need some guidance from you professionals. For the last couple of months I've been working on a web-page project.This is what I've got so far: - I've got a HTML5 page (index.php)- In this HTML5 page, I've got an embedded SVG-file, which is converted to a PHP-file (drawing.php)- It is converted to PHP, because it uses some data in a database to decide what the SVG-image should look like.- In this SVG-file, a PHP-script builds some graphics, and applies some animations to it.- The SVG-file also has a javascript-library attached to it, which I need for zooming and panning the SVG-image. Everything is fine so far, however now starts the problems:I've got some other data in my database, which is supposed to be displayed on the SVG-image only after the user clicks on a specific shape belonging to the SVG-image. The only possible way I could imagine this to work would be to use AJAX, however I have no idea how to use AJAX together with an embedded SVG-file.Googling for days hasn't help me too much either. I would be very grateful to anyone who could provide some help. :Pleased:

Link to comment
Share on other sites

Hello, and thank you for answering so fast! That could be an option when a shape is clicked it initiate a JS-function which took care of the AJAX business, but I think I tried that and couldn't figure out how to put the received data from the database into the right element. Could you help me with that line of code? *** Edited later, now working *** index.php

  <?php session_start(); ?><!DOCTYPE html><html>  <head>  </head>  <body>	<embed src="drawing.php" type="image/svg+xml" width="1000px" height="500px"/>  </body></html> 

drawing.svg

<?phpsession_start();header('Content-Type: image/svg+xml');print('<?xml version="1.0" standalone="no"?>');?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">  <script type="text/ecmascript" xlink:href="library.js"/>    <script type="application/ecmascript" >	 <![CDATA[	  function ajax_function()	  {	 var xmlhttp;	 if (window.XMLHttpRequest)	 {// code for IE7+, Firefox, Chrome, Opera, Safari	 xmlhttp=new XMLHttpRequest();	  }	  xmlhttp.onreadystatechange=function()	 {	 if (xmlhttp.readyState==4 && xmlhttp.status==200)	  {	 document.getElementById("display_data").firstChild.data=xmlhttp.responseText;	  }   }xmlhttp.open("GET","connect_to_database.php",true);xmlhttp.send();}]]></script> <?php /* some PHP code is building the SVG-image here */ ?> <rect id="trigger" width="100" height="50" fill="black" onclick="ajax_function()">	<animateTransform id="scaledown" attributeName="transform" attributeType="XML"					type="scale" from="1" to="3" begin="display_data.click" dur="1s"					additive="replace" fill="freeze"/></rect>  <text id="display_data" y="100" width="100" height="50" fill="black" ></text> </svg> 

Edited by Nanonano
Link to comment
Share on other sites

You were right, innerHTML does not work in SVG. I changed the code in my last post above, so now it's working when I return the AJAX-stuff to a SVG-text-tag. What I now need is a way to return pure SVG-code via AJAX, and put it somewhere inside the SVG-tags.So that new shapes are created after the AJAX-call.I've made an attempt under, but it doesn't seem to work as expected. I hope that someone can correct me. drawing.svg

<?phpsession_start();header('Content-Type: image/svg+xml');print('<?xml version="1.0" standalone="no"?>');?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">  <script type="text/ecmascript" xlink:href="library.js"/>    <script type="application/ecmascript" >	 <![CDATA[	  function ajax_function()	  {	 var xmlhttp;	 if (window.XMLHttpRequest)	 {// code for IE7+, Firefox, Chrome, Opera, Safari	 xmlhttp=new XMLHttpRequest();	  }	  xmlhttp.onreadystatechange=function()	 {	 if (xmlhttp.readyState==4 && xmlhttp.status==200)	  {	 document.getElementById("display_data").firstChild.data=xmlhttp.responseText;	  }     }    xmlhttp.open("GET","connect_to_database.php",true);    xmlhttp.send();   }  ]]>  </script>   <rect id="trigger" width="100" height="50" fill="black" onclick="ajax_function()" />   <g id="display_data" />   <!-- Somehow the pure SVG-code returned from connect_to_database.php should be put in here --> </svg> 

connect_to_database.php

echo "<rect x=\"100\" y=\"100\" width=\"50\" height=\"20\" /> ";

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...