0

PHPファイルによって生成されたsvg画像を読み込もうとしています。標準の svg 表記を使用すると、svg をサポートするブラウザーで機能します。これは新しいことではありません。

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

一方、同じことを試してみましたが、今回は svg Web ドキュメントhttp://svgweb.googlecode.com/svn/trunk/docs/UserManual.htmlで説明されている表記法を使用します (すべての前に svg Web ファイルをインポートしています)。他の 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 ファイルの 1 つの例です (実際に 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 の仕組みは、ファンキーな<script type="image/svg+xml">タグの HTML ページを解析し、ページの読み込み時に必要に応じてそれらをフラッシュに変換することだと推測しています。

明らかに、これは、ページ読み込みイベントが 1 回しか発生しないため、ページに追加されたコンテンツが解析されないことを意味します。それがあなたのアプローチがうまくいかない理由です。

幸いなことに、SVGWeb は実行時に IE で SVG オブジェクトをレンダリングするための API を提供します。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 やテーブルなどの可能性があります。

于 2012-08-16T02:16:21.857 に答える