在xmlhttprequest响应中使用svg web

Question

I'm trying to load a svg image generated by a php file. If I use the standard svg notation it works for the browser that support svg, this is nothing new:

    <svg><rect x="20" y="40" width="100" height="200" /></svg>

On the other hand if I try the same but this time using the notation described in svg web documentation http://svgweb.googlecode.com/svn/trunk/docs/UserManual.html (I'm importing the svg web file before any other javascript file), but nothing happens:

   <script type="image/svg+xml"><svg><rect x="20" y="40" width="100" height="200" /></svg></script>

I made a script to execute all the javascript within the xmlhttprequest response text, by using eval. All the "normal" javascript works but this doesn't. Does anyone have an idea of what I'm doing wrong?

Here is the XHR function:

                            function loadXMLDoc(file, div){var xmlhttp;
                            if(window.XMLHttpRequest){
                                xmlhttp = new XMLHttpRequest();
                            }

                            else{
                                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                            }


                            xmlhttp.open("GET", file, true);

                            xmlhttp.onreadystatechange = function(){

                            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                                var myresponse = xmlhttp.responseText;
                                var mydiv = document.getElementById(div);
                                mydiv.innerHTML=myresponse;

                            }

                            if(xmlhttp.status==404){
                                document.getElementById(div).innerHTML="<h1>File not found</h1>";
                            }
                            }
                            xmlhttp.send();

                                                                                            }

Here is an example of one of the php files loaded using xhr (I don't include the php classes that will in fact generate the svg):

   echo '<script type="image/svg+xml"><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1" baseProfile="full">
   <rect x="0" y="0" width="60" height="60" style="stroke: green;"/>
   <rect x="25" y="25" id="myRect" rx="0.6" ry="0.6" width="150" height="150" fill="green"   stroke="yellow" stroke-width="8"/>
   </svg></script>';

   ?>

In the case of the php file if remove the tag it will work by using the native support for svg but svg web won't work.

Thanks in advance.

Answer 1

I haven't used SVGWeb but this answer is based solely on the link you provided for the documentation.

Firstly an explanation of why your approach doesn't work. Without reading the code, I'm guessing that how SVGWeb work is to parse the HTML page for the funky <script type="image/svg+xml"> tag and convert them to flash if necessay on page load.

Obviously, this means that any content added to the page won't get parsed since the page load event fires only once. That's why your approach doesn't work.

Fortunately SVGWeb does provide an API to render SVG objects in IE at runtime. It's a method called: svgweb.appendChild() (search the document). Unfortunately the svgweb.appendChild method does not accept a string as an argument but needs a properly parsed svg object. Fortunately the documentation explains how to get that object at run time. But you can't do it with XMLHttpRequest .

Here's how the documentation says you can do it (read the Dynamically Creating an SVG OBJECT section):

var obj = document.createElement('object', true);
obj.setAttribute('type', 'image/svg+xml');
obj.setAttribute('data', 'rectangles.svg'); // <-------- this is where you
obj.setAttribute('width', '500');           //           load the file from
obj.setAttribute('height', '500');          //           your server

// And this is how you add the SVG object to your document:
obj.addEventListener('load', function() {
    svgweb.appendChild(obj, document.body);
}, false);

Note that it doesn't have to be document.body . It could be a div or a table etc.