Ich habe diesen SVG-Container mit Pfaden. Ich möchte es bearbeiten, also wird die Füllung der Pfade ein Muster sein. Dies ist mein fehlgeschlagener Versuch:
Ich füge einen Gradienten hinzu:
%Vor%Und dann ändern Sie die Pfade füllen:
%Vor%Das funktioniert nicht. Was vermisse ich?
Ihr Problem (was Sie "vermissen") ist, dass jQuery neue Elemente im XHTML-Namespace erstellt, während SVG-Elemente im SVG-Namespace erstellt werden müssen. Sie können keinen Rohcode in einer Zeichenfolge für SVG-Elemente verwenden.
Die einfachste (no-plugins) -Methode besteht darin, sich nicht mehr so sehr auf jQuery zu verlassen und nur einfache DOM-Methoden zum Erstellen der Elemente zu verwenden. Ja, es ist ausführlicher, als nur jQuery zu verwenden, um Ihre Elemente für Sie magisch zu konstruieren ... aber jQuery funktioniert in diesem Fall nicht.
Alternativ können Sie auch das Keith Woods-Plugin "jQuery SVG" verwenden, das viele bequeme Methoden für gängiges SVG bietet Operationen, einschließlich der Fähigkeit lineare Gradienten zu erstellen .
Eine Lösung gefunden. Es ist ein bisschen hässlich, erfordert aber keine zusätzlichen Plugins.
Offenbar muss ein Muster in das Tag eingefügt werden, wenn das SVG erstellt wird (es wird wahrscheinlich nur gelesen).
Das Ersetzen des Inhalts des SVG-Tags durch den Wrapper mit sich selbst funktioniert also ( base ist dieser Wrapper):
Ich denke, du musst das SVG-Plugin für jQuery verwenden ( hier ). Beim Hinzufügen von SVG-Elementen mit der "normalen" jQuery-Bibliothek werden wahrscheinlich die Namespaces verwechselt.
Versuchen Sie Folgendes:
%Vor%(Nicht genau sicher. Sie müssen vielleicht ein bisschen mit dem Code herumspielen.)
BEARBEITEN
Habe gerade diese Geige erstellt, um die Thesis zu testen (wie von @Phrogz vorgeschlagen). Tatsächlich gibt es http://www.w3.org/1999/xhtml als Namespace für den eingefügten <linearGradient> zurück, was der falsche Namespace ist und somit meine obige Spekulation bestätigt.
Ich möchte nur kurz vorbeikommen und sagen, dass ich eine elegantere Lösung gefunden habe, die jQuery weiterhin mit SVG-Elementen verwendet, aber ohne die jQuery-SVG-Bibliothek (die nicht mehr aktualisiert wird und einige Probleme mit jQuery 1.8 oder höher hat) ). Verwenden Sie einfach eine Funktion wie folgt:
%Vor%Er erstellt ein SVG-Element im SVG-Namespace und kapselt ihn mit jQuery. Sobald das Element im rechten Namespace erstellt wurde, können Sie es mit jQuery frei verwenden:
Sie können die Funktion dann folgendermaßen verwenden:
%Vor%Es ist nicht so kompakt, wie Sie es vielleicht wollen, da Sie jedes Element von Hand erstellen müssen, aber es ist viel besser als alles mit DOM-Methoden zu manipulieren.
Eine kleine Anmerkung, die Funktion jQuery .attr () geht davon aus, dass alle Attribute kleingeschrieben sind, was bei SVG-Elementen nicht der Fall ist (z. B. das viewBox -Attribut in <svg> -Tags). Um dies zu umgehen, verwenden Sie beim Festlegen von Attributen mit Großbuchstaben etwa Folgendes:
Tags und Links javascript jquery svg