Ist es möglich, einen gruppierten Pfad in SVG mit linearem Verlauf zu füllen (durch css oder attr bei jQuery-Ereignis)?

Ihr Problem kann gelöst werden, indem Sie das Farbverlaufskoordinatensystem auf den Benutzerbereich einstellen (anstelle des standardmäßigen Begrenzungsrahmens).

Sie könnten versuchen

Die Lösung widerspricht nicht dem Kommentar von e.nelson - was hier passiert ist, dass jede Untergruppe, die die Nationen repräsentiert, immer noch ihre eigene Gradienteninstanz hat, während alle diese Instanzen denselben Koordinatenursprung und dieselben Transformationen bezüglich des Benutzerraums haben - Daher ist es an keiner Stelle im endgültigen Rendering von Bedeutung, welche Gradienteninstanz sichtbar ist.

zwei Anpassungen sind erforderlich:

1. [geringfügig] Sie müssen die y1 / y2-Offsets (oder die Stop-Offsets) der Gradienten-Definition anpassen - da sie sich auf den Benutzerkoordinatenraum der gesamten Map beziehen, deckt Afrika nur einen Teil des Gradienten zwischen den definierten Stopps ab. probiere y1="50%" und y2="100%" .

2. [mittel] Wenn Sie sich die svg g-elements ansehen, die die Länderformen definieren, werden Sie feststellen, dass einige von ihnen einer zusätzlichen Übersetzung unterzogen werden. Sie verschieben das Benutzerkoordinatensystem effektiv und gelten daher auch für den Gradienten, der dazu führt, dass die betroffenen Landformen wie Flecken auf der Karte erscheinen. Diese Spurios-Transformation ist wahrscheinlich ein Artefakt der Aktionen im Generator, mit denen die Karte erstellt wurde. Es kann behoben werden, indem die Übersetzungsoffsets zu jeder absoluten Koordinate in den Pfadelementen innerhalb der jeweiligen g-Elemente hinzugefügt werden. Da diese Pfade unter Verwendung relativer Koordinaten für die zusammengenähten Teile definiert sind, reduziert dies die Änderung der Koordinaten der anfänglichen M- und letzten C-Befehle im d-Attribut des Pfads.

Ich habe ein Ad-hoc-Perl-Skript ausgearbeitet, um die Struktur des Svg-Codes, der die Ländergrenzen repräsentiert, zu normalisieren, der die oben genannten Modifikationen implementiert. Beachten Sie, dass diese Änderungen auch relativ einfach in js durchgeführt werden können. Das ist das Ergebnis .

hoffe, dass hilft und lassen Sie mir eine Notiz, wenn Sie zusätzliche Informationen zur Durchführung der genannten Anpassungen benötigen.

PS: Ich habe gerade gemerkt, dass Mosambik noch immer in der generierten Ausgabe fehlt - für die Form dieses einzelnen Landes wurde noch eine Übersetzung angegeben. Dieses kleine Detail ist etwas, das später hinzugefügt werden muss, aber ...

Ergebnis http://collapsar.co.ohost.de/data/astcko.03.png

Wenn du ganz Afrika mit einem Gradienten füllen willst, dann willst du die Union die Pfade dafür füllen. Vielleicht solltest du eine andere Karte benutzen? Eins mit nur den Kontinenten?

Wie auch immer, eine Möglichkeit, es zu beheben, wäre:

1. öffne es in Inkscape
2. Wählen Sie alle Pfade aus, die Sie ausfüllen möchten
3. wähle "Union" im Menü "Pfad"
4. Speichern Sie die Datei (oder kopieren Sie den unionierten Pfad)

Ein anderer Weg:

1. Suchen Sie nach einer anderen Karte, siehe Ссылка oder Ссылка . Hier ist einer mit den Kontinenten nur, Afrika markiert .

Danach können Sie den Verlauf auf diesen neuen Pfad anwenden.

Sie könnten es auch auf andere Arten machen, aber aus Leistungsgründen sind sie wahrscheinlich nicht so gut. Eine dieser (nicht empfohlenen) Möglichkeiten besteht darin, ein Rechteck mit dem Farbverlauf zu füllen, in dem Sie einen Clip-Pfad erstellt haben, der aus den Pfaden in der Gruppe besteht. Etwas in dieser Richtung:

Ich denke, Ihr Problem könnte sein, dass fill ist geerbt nach dem Standardregeln von CSS in SVG . Sie müssten also ein explizites fill von transparent für die untergeordneten g -Elemente festlegen. Wenn es nicht so ist, dass ich zurückkomme und mich um etwas anderes kümmere, hast du ein Online-Beispiel.