0

我正在尝试加载由 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>

我编写了一个脚本来执行 xmlhttprequest 响应文本中的所有 javascript，方法是使用 eval。所有“正常”的 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 web 将不起作用。

提前致谢。

4

1 回答 1

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 或 table 等。

于 2012-08-16T02:16:21.857 回答