Ich versuche, einige SVG-Inhalte dynamisch anzuzeigen. Dieser Inhalt wird als Zeichenfolge in meiner Datenquelle gespeichert. Eine Beispielzeichenfolge würde folgendermaßen aussehen:
%Vor% Um IE anzupassen, verwende ich SvgWeb . Mein Problem ist, um Svg-Inhalt anzuzeigen, muss ich es in eine <script type="image/svg+xml"></script> Tag-Kombination einbinden. Meine Herausforderung ist, dass die SVG asynchron über JQuery zurück gezogen wird. Und meines Wissens kann ich ein "Skript" -Tag nicht dynamisch aus JavaScript schreiben.
Wie nehme ich den SVG-Inhalt, der mit JQuery abgerufen und dynamisch angezeigt wird?
Eine Teilantwort hier gefunden und unten wiedergegeben. Beachten Sie, dass dieser Ansatz Sie zwingt, die root <svg> -Tags und -Attribute in javascript zu erstellen, statt nur das gesamte svg-Dokument zu laden, das Sie im Beispiel Ihrer Frage haben.
Das dynamische Erstellen eines SVG-Root-Elements ähnelt dem direkten Einbetten in eine Webseite. Sie müssen kein SCRIPT-Tag erstellen, wie wenn Sie das SVG beim Laden der Seite direkt einbetten würden:
%Vor%Stattdessen folgen Sie einem ähnlichen Prozess wie oben:
%Vor%Sie müssen einen Rückruf verwenden, um zu wissen, wann SVG an die Seite angehängt wird (dies ist geringfügig) Abweichung vom Standard). Die folgenden Möglichkeiten werden unterstützt:
%Vor%Fügen Sie nun den SVG-Stamm an unser Dokument an
%Vor%Beachten Sie im obigen Code, dass wir einen Ereignis-Listener verwenden müssen, um zu wissen, wann der SVG-Stamm vollständig in die Seite geladen wurde; Dies ist eine leichte Abweichung von dem Standard, der für die Magie von SVG Web notwendig ist.
Das übergeordnete Element, das Sie entweder an Ihren SVG-Stamm angefügt haben, muss bereits an das echte DOM auf Ihrer Seite angehängt sein (d. h. es kann nicht von der Seite getrennt werden).
Sie können jQuery SVG-Plugin verwenden. Die offizielle Website ist nicht erreichbar, aber suchen Sie nach Anweisungen .
Der relevante Teil, den Sie fragen, ist die Antwort in diesem Abschnitt, glaube ich ..
%Vor%lade (URL, Einstellungen) diesen Wrapper laden ein externes SVG-Dokument. Beachten Sie, dass Der Browser erlaubt möglicherweise das Laden nicht Dokumente von anderen Websites der ursprünglichen Seite. Wenn kein Rückruf erfolgt bereitgestellt wird und ein Fehler auftritt, der Fehlermeldung wird innerhalb der angezeigt SVG-Container.
url (string) ist der Ort des SVG-Dokument oder das tatsächliche SVG Inline dokumentieren.
Einstellungen (boolean) siehe addTo unter oder (Funktion) siehe onLoad unten oder (Objekt) zusätzliche Einstellungen für die Laden mit Attributen unten:
addTo (boolesch, optional) true to füge hinzu, was schon da ist, oder falsch (Standardeinstellung), um die Zeichenfläche zu löschen erste changeSize (boolesch, optional) true, um die Leinwandgröße zuzulassen ändern oder falsch (Standard) zu behalten Sie die Originalgröße onLoad bei (Funktion, optional) Rückruf nach Das Dokument hat diese Funktion geladen empfängt das SVG-Wrapper-Objekt und ein optionale Fehlermeldung als Parameter, und in dem ist dies die SVG Behälterabteilung.
Auch hier ist ein paar PHP-Code, den ich benutzt habe, um ein solches SVG in eine Schleife einzufügen, die gut funktioniert .
%Vor%