在xmlhttprequest響應中使用svg web

Question

我正在嘗試加載由php文件生成的svg圖像。 如果我使用標准的svg表示法，它適用於支持svg的瀏覽器，那么這並不是什么新鮮事：

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

另一方面，如果我嘗試相同的操作，但是這次使用的是svg網絡文檔http://svgweb.googlecode.com/svn/trunk/docs/UserManual.html中描述的符號（我先導入svg網絡文件其他JavaScript文件），但沒有任何反應：

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

我使用eval編寫了一個腳本來執行xmlhttprequest響應文本中的所有JavaScript。 所有“正常”的javascript都可以，但是不能。 有人知道我在做什么錯嗎？

這是XHR函數：

                            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();

                                                                                            }

這是一個使用xhr加載的php文件之一的示例（我不包括實際上會生成svg的php類）：

   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>';

   ?>

在php文件的情況下，如果刪除標記，它將通過使用對svg的本機支持來工作，但svg網絡將無法工作。

提前致謝。

Answer 1

我沒有使用SVGWeb，但是此答案僅基於您為文檔提供的鏈接。

首先說明為什么您的方法不起作用。 在不閱讀代碼的情況下，我猜測SVGWeb的工作方式是解析HTML頁面中的時髦<script type="image/svg+xml">標記，並在需要頁面加載時將其轉換為Flash。

顯然，這意味着添加到頁面的任何內容都不會被解析，因為頁面加載事件只會觸發一次。 這就是為什么您的方法行不通的原因。

幸運的是，SVGWeb確實提供了一個API，可在運行時在IE中呈現SVG對象。 這是一種稱為svgweb.appendChild()的方法（搜索文檔）。 不幸的是， svgweb.appendChild方法不接受字符串作為參數，而是需要正確解析的svg對象。 幸運的是，文檔說明了如何在運行時獲取該對象。 但是您不能使用XMLHttpRequest做到這一點。

文檔說明您可以執行以下操作（請閱讀“ Dynamically Creating an SVG OBJECT部分）：

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);

請注意，它不必是document.body 。 它可以是div或表等。