0

xlinksを含むSVGファイルがロードされ、別のソースから追​​加されると、xlinksはリンクされません。ローカルファイルとサーバーからのファイルの両方をロードする際に問題が発生しました。ファイルが読み込まれ、すべてのSVGがDOMにあります。xlinkがリンクしないことを除いて、すべてがうまく機能します。このコードをローカルファイルで機能させることができました。

    xmlDoc = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', null);
    xmlDocRoot = xmlDoc.documentElement;

    if (fil[0])
    {
        var blobURLref = window.URL.createObjectURL(fil[0]);

        xmlDoc.onload = function(evt) {
            xmlDocRoot = xmlDoc.documentElement;
            SVGRootImgs.appendChild(xmlDocRoot);
        }
        xmlDoc.src = xmlDoc.load(blobURLref);   

        window.URL.revokeObjectURL(blobURLref);
    }

ここで、fil [0]は、filesメソッドでロードされたローカルファイルです。そのコードを使用して、xlinksがリンクします。サーバーからロードしようとすると、次のコードを試しました。

        htmlObjImgs = document.getElementById("hom_img");
        SVGDocImgs = htmlObjImgs.getSVGDocument();
        var crt_date = new Date();
        var fd = new FormData();
        fd.append('usrname', usr_nam);
        fd.append('filename', fil_nam);
        var xhr = new XMLHttpRequest();

        xhr.onload = function() {  

            SVGRootImgs = SVGDocImgs.documentElement;
            var rspns_xhr = xhr.responseXML.documentElement;

            ld_tag_nods(ld_nodes = rspns_xhr.getElementsByTagNameNS(svgns, 'svg'), function(){

                var svg_fil = SVGDocImgs.createElementNS(svgns, "svg");

                ld_svg_fil(svg_fil = SVGDocImgs.importNode(ld_nodes[0], true), function(){

                    SVGRootImgs.appendChild(svg_fil);
                });
            });
        }  
        xhr.onerror = function() {  
            dump("Error while getting XML.");  
        }  
        xhr.open('POST', 'ld_fil.php?nocache='+crt_date, true);
        xhr.responseType = "document";
        xhr.overrideMimeType("image/svg+xml");
        xhr.send(fd);

ここで、ld_tag_nods（）とld_svg_fil（）は未定義のコールバックです。

このコードはすべてを100％ロードし、xlinkを含みますが、xlinkはリンクしません。xlinkを使用しないSVGは表示されますが、xlinkを使用するSVGは表示されません。

ローカルファイルとサーバーファイルの両方に同じファイルが使用されていることに注意してください。このファイルには、SVGタグにxlink参照が含まれています。

私は問題を回避する方法を見つけることができたと思います。たとえば、動作する可能性のあるBLOBへのURLを作成できます。しかし、サーバーコードのxlinksがリンクしない理由を知りたいのですが。ファイルが外部ソースからのものであるためですか？

4

1 に答える 1

0

ノードが1つのドキュメントから別のドキュメントに転送されるとき、importNode（）が使用されることになっていると思いました。importNode（）をスキップすると、すべてのxlinkがリンクした状態でファイルが読み込まれます。また、エラーや警告は表示されません。私はそれが機能したと思いますが、私は確かにプロセスを理解していません。これは機能するコードです。

htmlObjImgs = document.getElementById("hom_img");
SVGDocImgs = htmlObjImgs.getSVGDocument();
SVGRootImgs = SVGDocImgs.documentElement;

var crt_date = new Date();
var fd = new FormData();
fd.append('usrname', usr_nam);
fd.append('filename', fil_nam);
var xhr = new XMLHttpRequest();

xhr.onload = function() {  
  SVGRootImgs.appendChild(xhr.responseXML.documentElement);
}  
xhr.onerror = function() {  
  dump("Error while getting XML.");  
}  
xhr.open('POST', 'ld_fil.php?nocache='+crt_date, true);
xhr.responseType = "document";
xhr.overrideMimeType("image/svg+xml");
xhr.send(fd);
于 2013-03-16T05:37:48.560 に答える