jQuery Anhängen AJAX geladen SVG-problem

Bin ich erfolgreich laden per AJAX einige svg-aus externer Datei: 

$("#svg").load(svgUrl + " svg", function() {  
    //do stuff  
});

Mein HTML sieht so aus:

<div id="svg" ...>
    <svg ...>
        ...
    </svg>
</div>

Sehe ich die Grafiken nur gut. Jetzt möchte ich hinzufügen einige weitere svg-Elemente der geladenen svg. Ich änderte mein Skript: 

$("#svg").load(svgUrl + " svg", function() {  
    $("svg").append("<g id='compass'></g>");  
    //do stuff  
});

Für einige Gründe, warum das hinzugefügte element erscheint, als versteckte sich in firebug, und egal, was xml ist ich in des es ich kann es nicht sehen auf meiner Webseite.

Update:

Dank echo-flow ich war in der Lage, zum Anhängen an meine SVG. Jetzt wenn ich versuche zu laden, mein Kompass svg aus einer anderen xml-Datei-es erscheint nicht in meinem DOM. Im moment mein code sieht wie folgt aus:

$("#svg").load(obj.svgUrl + " svg", function() {
    var svgns = "http://www.w3.org/2000/svg";
    var g = document.createElementNS(svgns,"g");
    g.setAttributeNS(null,'id','compass');
    $("svg").append(g);
    $("#compass").load("files/svg/compass.xml");
});

Wenn ich in der Konsole in firebug sehe ich, dass das Ergebnis der AJAX-Anfrage für Kompass-markup ist erfolgreich, aber leer ist.

InformationsquelleAutor lanan | 2011-07-23
  1. 17

    jQuery ist nicht wirklich gebaut, um bewusst sein, XML-namespaces, so dass die Zeichenfolge "<g id='compass'></g>"ist wahrscheinlich immer analysiert, so dass die erzeugten DOM-Knoten befinden sich im Standard-Namensraum, im Gegensatz zu den SVG-Namensraum. Sie können dies lösen, indem reguläre DOM zum erstellen der Knoten. Dies würde wie folgt Aussehen:

    svgns = "http://www.w3.org/2000/svg"
$("#svg").load(svgUrl + " svg", function() {  
    var g = document.createElementNS(svgns,"g");
    g.setAttributeNS(null,'id','compass');
    $("svg").append(g);
    //do stuff
});

    Wenn Sie brauchen, um komplexere Strukturen, dann würde ich empfehlen, sich auf die jquery-svg Bibliothek, die eine sauberere API für die Erzeugung von SVG-DOM.

    Aktualisiert

    Ich das falsch verstanden, dass Sie versuchen zu laden, ist ein SVG-Dokument und fügen es Ihrem host-HTML-Dokuments - statt, ich dachte, Sie waren zu erzeugen versuchen SVG-Skript verwenden. Um Ihr problem zu lösen, würde ich empfehlen die folgenden (nicht getestet, aber sollte funktionieren):

    //get the SVG document using XMLHTTPRequest
$.get(svgUrl + " svg",
function(svgDoc){
  //import contents of the svg document into this document
  var importedSVGRootElement = document.importNode(svgDoc.documentElement,true);
  //append the imported SVG root element to the appropriate HTML element
  $("#svg").append(importedSVGRootElement);
},
"xml");
    • Also wenn ich eine externe Datei mit ein Stück von SVG-markup, das möchte ich anfügen, um meine bereits geladenen SVG, was wäre der einfachste Weg, das zu tun? Mit Bibliothek,...?
    • Vielen Dank für den Versuch mir zu helfen! Ich habe Ihre erste Beispiel und erfolgreich angehängt <g id="Kompass"></g> zu meiner geladene svg-markup. Jetzt möchte ich hinzufügen, dass einige von xml-Daten aus einer anderen externen Datei im generierten leeren Kompass-element, aber es scheint nicht zu funktionieren. Ich werde zu aktualisieren, meine Frage, um zu versuchen deutlich zu machen.
    • Um das Anhängen von Inhalten von einem anderen SVG Dokument in Ihren host-HTML-Dokument, müssen Sie die Technik, die ich in " meine aktualisierte Antwort, nicht die Technik, die in der ursprünglichen Antwort. Es macht keinen Sinn, load() und dann generieren markup mit DOM im inneren des load-callback.
    • Nochmals vielen Dank! Habe meine svg zeigen, wenn Sie sich mit Ihren aktualisierte Methode für die beiden svg-Dateien!
    • Cool, das führte mich in die richtige Richtung. Mein Problem war etwas im Zusammenhang. Diese Antwort hilft, wenn Sie mit d3 und Rückgrat oder etwas ähnliches: stackoverflow.com/questions/9651167/...
    InformationsquelleAutor jbeard4
  2. 0

    Könnte es einfacher sein, wenn Sie beginnen mit jquery Leinwand. was ist eine modulare Sprache zur Beschreibung zwei-dimensionaler Vektor und mixed Vektor/raster-Grafiken in XML -

    • Danke für die Anregung! Für dieses Projekt wollte ich mit inline-SVG in HTML5 ohne zusätzliche SVG-Bibliotheken.
    InformationsquelleAutor Ali Habibzadeh
  3. 0

    Ich habe es, wie folgt zu arbeiten.

                        $.ajax({
                            url: url,
                            data: {data:tosendAlong},
                            type: "POST",
                            dataType: "text",
                            success: function (svg) {
                                    $("#map").html('<?xml version="1.0"?>' + svg)
                                            .attr({
                                                    'height': '100%',
                                                    'width': '100%'
                                            });
                            }
                    })
    InformationsquelleAutor user1682384
Schreibe einen Kommentar