Jump to content
Sign in to follow this  
Nanonano

Need some expertise: How to retrieve data from a database using PHP, and pass it to an embedded svg-file?

Recommended Posts

I have included a SVG-file into the html-page with the embed-tag, like this: index.html

<!DOCTYPE html><html><head> <script type="text/javascript" src="jquery-1.7.1.js"/> function AJAX(){   $.post("UpdatePage.php",function (PhpParameter){     $("#SVGfile").html(PhpParameter);	    });} </head> <body>   <div style="height:50px;width:50px;background-color:black;" onclick="AJAX()"/>   <embed src="SVGimage.svg" type="image/svg+xml" /></body></html>

The SVG-file looks like this: SVGimage.svg

 <?xml version="1.0" standalone="no"?>  <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"/>  </svg>

The Library.js -file contains a nessicary library to zoom and pan my SVGimage.svg document. Library.js uses the XML-DOM. I use jQuery's POST method together with a PHP-file, which retrieve data from the database and parse it back to the html-file. The problem is:I have stored information in a MySQL database telling what the SVG-picture should look like. How can I transfer this information into the embedded SVG-file? Unfortunatly, I can't used <svg> tags directly in the HTML-file, because the Library.js file is written for the XML-DOM. I didn't write it, and I'm not good enough to convert it into using the HTML-DOM. Any help is very welcome! This has turned out to be a huge headache.

Edited by Nanonano
  • Like 1

Share this post


Link to post
Share on other sites

Instead of linking to an SVG file, link to a PHP file, and use PHP to generate the SVG. To make sure the SVG appears properly, in the PHP file, you should start off with the MIME type, like:

<?phpheader('Content-Type: image/svg+xml');?><?xml version="1.0" standalone="no"?><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"/><?php//Everything needed to actually generate the image here?></svg>

Share this post


Link to post
Share on other sites

Thank you so must for answering. I tried your advice.In index.html I write the embedding with a php-extension, like this:

<embed src="SVGimage.php" type="image/svg+xml" width="500" height="400" />

And my SVGimage.php looks like this:

<?php  session_start();  $FirstName = $_SESSION['GameName'][0];  $LastName = $_SESSION['GameName'][1];  $FullName = $FirstName . " " . $LastName;  header('Content-Type: image/svg+xml');?><?xml version="1.0" standalone="no"?><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"/><?php  echo "<rect x=\"50\" y=\"70\" rx=\"10\" ry=\"20\" width=\"90%\" height=\"150\" fill=\"red\" /> ";?> </svg> 

However, when I run the page like this, my Firefox want to install a plugin, and chrome complains about a syntax error on line 8 in SVGimage.php I tried to remove everything but src:"SVGimage.php" from the embed tag.I tried to remove the four "session"-lines from the beginning of the SVGimage.php.I also tried to use PHP's "include"-function, in case that was what you ment.Unfortunatly, none of the above worked. Any more help is still appreciated.

Edited by Nanonano

Share this post


Link to post
Share on other sites

It's

src="SVGimage.php"

not

src:"SVGimage.php

Also, in your SVG, add

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Share this post


Link to post
Share on other sites

Thanks again.So it should be like this? index.html

 <embed src="SVGimage.php" type="image/svg+xml" width="500" height="400"  />

SVGimage.php

<?php  session_start();  $FirstName = $_SESSION['GameName'][0];  $LastName = $_SESSION['GameName'][1];  $FullName = $FirstName . " " . $LastName;  header('Content-Type: image/svg+xml');?><?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"/>   <?php	 echo "<rect x=\"50\" y=\"70\" rx=\"10\" ry=\"20\" width=\"90%\" height=\"150\" fill=\"red\" /> ";   ?></svg>

For some weird reason both IE and Chrome is complaining about a syntax error on line 8 (where the <xml>-tag is).I could understand why line 8 had an error earlier (since I had forgotten the <!DOCTYPE svg PUBLIC ....> tag)Firefox still wants to install a plug-in. I tried again to remove everything but the src="SVGimage.php" from the <embed> -tag.I also removed all the four "session"-lines from SVGimage.php, however then IE and Chrome were complaining about the same line where the <xml>-tag is.Any more ideas? I am really lost here. Thank you so much for helping.

Share this post


Link to post
Share on other sites

Are you sure PHP is running on the server? Are you even running this in a web server to begin with? Open the SVGimage.php directly, right click, and select "View Source". If you can see the PHP code, then PHP is not running.

Share this post


Link to post
Share on other sites

Hey.Yes, the server is running php, and I have used it with great success earlier, for example for retrieveing data from a database.I tried your suggestion to view source (good tip btw), and no php-code is shown there.What it says there is: <b>Parse error</b>: syntax error, unexpected T_STRING in <b>/www/clanteam.com/b/e/u/beurocity/htdocs/Gamepage/BuildCity.php</b> on line <b>8</b><br />

Edited by Nanonano

Share this post


Link to post
Share on other sites

I found a solution: SVGimage.html

  <?phpsession_start();$FirstName = $_SESSION['GameName'][0];$LastName = $_SESSION['GameName'][1];$FullName = $FirstName . " " . $LastName;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"/> <?php  echo "<rect x=\"50\" y=\"70\" rx=\"10\" ry=\"20\" width=\"90%\" height=\"150\" fill=\"red\" /> ";?></svg> 

The <xml>-tag has to be wrapped in PHP's print() function. But thanks for all the help boen_robot !!

Edited by Nanonano

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...