2

InkScape などのプログラムで作成された SVG ファイルがあります。それを Javascript にロードし、他の SVG 要素と一緒に SVG オブジェクトに入れたいと考えています。

URL を渡すことができる関数が必要です。その関数はその SVG を取得し、読み込んだ SVG ファイル内のすべてをグループ化する「g」オブジェクトを返します。

SVG.LoadXML = function (url, continuation) {
    var http = new XMLHttpRequest();
    http.open("GET", url, false);
    http.send();
    textBody = http.responseText;

    var g = document.createElementNS(SVG.ns, "g");

    g.innerHTML = textBody;

    return g;
}

ロードされるファイルの本体は次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC [...] >
<svg version="1.1" [...] >

<g>
  <defs>
    <path id="SVG1ID_1_" [...]
etc.

したがって、私がやりたいことは、ファイルを XML として開き、最初の 2 つのノードをスキップして、2 つ目のノードを入力し、その中のすべてのノードをドキュメントの SVG にコピーすることだと思います。

これは非常に単純であるべきもののように思えますが、すでに数千人によっていくつかの異なる方法で実装されています。

4

2 に答える 2

4

SVG を扱うときは、これが HTML とまったく同じように機能することを期待して、罠に陥らないでください。ここでは、いくつかのことを別の方法で行う必要があります。

SVG 要素は HTML ではないため、設定できません.innerHTML。.appendChild()代わりに使用してください。プレーンテキストではなく、明らかに DOM 要素のみを追加できるため、.responseXML代わりに.responseText.

ロードされた SVG をナビゲートし、特定のノードのみを選択するには、、、、、などの標準の DOM メソッドを使用し.getElementById()ます。.getElementsByTagName().childNodesfirstChild.lastChild

取得した SVG からメイン SVG にノードを追加するには、まずそれをインポートする必要があります。これについて説明している別の投稿を参照してください。

于 2013-03-29T01:06:29.077 に答える
0

appendChild がその子も親から削除することを認識していなかったため、私の実装では SVG アイテムの約半分しか取得できませんでした。作業コードは次のとおりです。

SVG.LoadXML = function (url) {
    var http = new XMLHttpRequest();
    http.open("GET", url, false);
    http.send();
    xmlBody = http.responseXML;

    var g = document.createElementNS(SVG.ns, "g");
    var svg = xmlBody.getElementsByTagName("svg")[0];
    do {
        var child = svg.firstChild;
        g.appendChild(child);
    } while (svg.firstChild);
    return g;
}
于 2013-03-29T23:48:43.517 に答える