Vorschläge zum Manipulieren einer SVG-Karte

Question

Ich arbeite an einer Karte der einheimischen Sprachen von Kalifornien für Wikipedia. Die Karte enthält Bereiche, die jeweils einer Sprache entsprechen. Das Original sieht wie folgt aus (klicken Sie, um zu sehen die SVG):

Ich möchte von Hand für jede dieser einzelnen Sprachen machen „Lokatorkarte“ (in Inkscape), wie diese, für eine Sprache namens Cahuilla (die den Sprachcode cah hat):

Unnötig zu tun dies in dem Hals zu sagen, ein Schmerz wäre, wenn ich alle 60 einige von Hand in Inkscape erzeugt.

Schlimmer noch, wenn ich einen Fehler im Original finde, müsste ich den ganzen Satz von Locator Maps neu erstellen. (Und tatsächlich habe ich kürzlich festgestellt, dass mein Original eine Sprache komplett vermisst. Sorry Cupeno.)

Also mein Ziel ist es, diesen Prozess zu automatisieren. Ich habe nicht viel Erfahrung mit der Verarbeitung von SVG oder sogar XML, daher suche ich nach Empfehlungen, welche Bibliotheken am hilfreichsten wären. Ich würde Lösungen in Python bevorzugen, da ich in dieser Sprache nicht hoffnungslos bin. Um

zusammenfassen, ich muß:

Hier finden Sie eine Liste von Verweisen auf alle Sprachformen in der ursprünglichen SVG-Datei.

in dieser Liste für jede Sprache:

1. Änderung der Hintergrundfarbe der Form für die aktuelle Sprache

2. einen Rahmen um die

   Sprache setzen

3. die Box und Maßstab duplizieren es zu einer bestimmten Größe (ich erkenne, dass es in diesem Schritt schwierig sein könnte, die umgebenden Formen tatsächlich zu "beschneiden", wie ich es in meinem Beispiel getan habe - es wäre ausreichend, nur eine Box mit der Sprachform auf weißem Hintergrund zu erstellen.)

4. Ort das Duplikat in der oberen rechten Ecke

5. speichern all dieses Zeug in code.svg

Das Endprodukt wird dann cah.svg usw. Noch besser wäre es benannt 60 SVG-Dateien sein, Es wäre möglich, den gesamten Shebang neu zu generieren, wenn es nötig wäre, die ursprüngliche Map zu bearbeiten (was sehr wahrscheinlich ist).

Answer 1

Ich empfehle Python würde und speziell Erweiterungen für Inkscape zu schaffen. Ich glaube nicht, dass du wirklich 60 SVG brauchst, es sei denn, du willst das wirklich, weil die Quellkarte alles haben wird, was du brauchst.

Ich würde Inkscape verwenden, um die verschiedenen Regionen in denselben Sprachcode umzubenennen, den Sie verwenden werden. Zum Beispiel ist Cahuilla oder cah derzeit path13882 in Ihrer SVG-Datei. Ich würde es in cah oder Cahuilla umbenennen und den Prozess für jede der Sprachregionen wiederholen. Verwenden Sie den Edit \ XML Editor, um sicherzustellen, dass Sie alle Pfade aktualisieren.

Nachdem Sie die Namen/IDs aktualisiert haben, können Sie sich SVG-Scripting ansehen. Ich würde nur ein Javascript/ECMAScript Karte oder Wörterbuch erstellen, die die relevanten Informationen für die Sprache hat:

var langaugeMap = {}; 
languageMap["cah"] = { name: "Cahuilla", color: "rgb(255, 0, 0)" }; 
languageMap["cup"] = { name: "Cupeño", color: "rgb(255, 64, 0)" }; 
// and so on -- this could even be generated from a CSV file or Excel, etc. 
// if the highlighted color is always the same, then you don't need it in the map 
// or use style sheets for an activeshape and inactiveshape 
// Put any information that is specific to a language in the map 

Dann brauchen Sie nur ein Mouseover-Funktion hinzuzufügen, die den Begrenzungsrahmen würde hinzufügen und positionieren und den Pfad Farbe ändern. Hier ist one example von Ereignissen und Skripten, obwohl es ziemlich veraltet ist. Carto.net hat auch eine interaktive Karte Beispiel.

Die SVG würde in etwa so aussehen:

<path 
    style="fill:#800000;fill-opacity:1;display:inline" 
    d="m 422.43078,517.40746 c 0.52151,0.006 1.10755,0.0374 1.75925,0.0825 3.82011,0.26462 5.01088,0.75501 5.75001,2.37491 0.51312,1.12355 2.4121,3.0097 4.22213,4.1946 3.906,2.55656 7.38824,2.07964 9.61517,-1.3194 2.12996,-3.25075 9.13451,-3.19196 13.61739,0.11545 1.77185,1.30707 4.04994,2.38037 5.06319,2.38041 1.01325,0 3.34593,0.92548 5.18421,2.06155 2.52816,1.56236 4.9918,2.09869 10.09889,2.19902 3.71359,0.0729 7.68145,0.64349 8.82374,1.26442 2.81717,1.53202 5.67633,1.42382 10.7693,-0.40133 4.97461,-1.78261 6.31161,-1.36525 17.10267,5.31063 3.39862,2.10239 6.90491,4.08094 7.7956,4.39801 2.46593,0.8776 4.55428,4.66976 3.95259,7.17971 -0.29359,1.22605 -0.75898,3.51121 -1.03349,5.07968 -0.27411,1.56855 -0.88382,3.33952 -1.35761,3.93621 -1.50842,1.89871 -20.98501,7.77151 -27.8945,8.41122 -3.66014,0.33879 -8.3091,1.04337 -10.32987,1.56676 -3.50666,0.90799 -3.81743,0.79746 -6.78388,-2.44089 -3.3486,-3.65594 -6.11308,-4.2716 -8.48815,-1.89661 -2.14408,2.14401 -1.85126,3.96434 1.0667,6.66846 1.40725,1.30409 1.85699,2.10446 1.00027,1.77571 -0.85672,-0.32883 -6.3937,-0.12213 -12.3033,0.46176 -5.9096,0.58386 -12.56062,1.27336 -14.78297,1.53381 -4.17058,0.4888 -5.09869,-0.37014 -2.61673,-2.42989 2.1563,-1.78956 1.74245,-2.63318 -1.65999,-3.36449 -1.69931,-0.36525 -4.94789,-1.90738 -7.213,-3.42496 -2.26473,-1.51754 -5.89662,-3.66823 -8.07583,-4.77731 -2.17921,-1.10923 -6.21922,-3.94186 -8.97721,-6.29463 -4.75318,-4.05478 -4.93682,-4.36681 -3.43604,-6.02527 0.96935,-1.07117 2.36209,-1.56397 3.5899,-1.26992 1.62639,0.38937 2.49494,-0.41237 4.59588,-4.24958 1.42481,-2.60257 2.23686,-4.95457 1.80316,-5.22266 -0.4337,-0.26805 -1.06784,-3.14557 -1.40725,-6.39358 -0.33978,-3.24797 -1.19001,-6.79064 -1.89134,-7.87242 -1.74322,-2.68957 -1.2114,-3.65437 2.44111,-3.61188 l 0,0 z" 
    id="cah" 
    inkscape:label="#cah" 
    onmouseover="highlightRegion(evt);" 
    onmouseout="restoreRegion(evt);" /> 

Für die Automatisierung mit der SVG-Datei, würde ich Inkscape Erweiterungen verwenden. Sehen Sie sich die Inkscape wiki unter den Developer Tutorials/Extensions an. Ansonsten ist SVG immer noch XML. Wenn Sie Ihre Sprachregionen in der Quelldatei mit einem eindeutigen Namen benannt haben, können Sie Python verwenden, um die XML zu analysieren und jeden Pfad/Sprachbereich in einer separaten Datei zu speichern.

Answer 2

Hier ist ein example mit Ihrer Karte. Sie können auf ein beliebiges Element klicken, um die Boundingbox zu erhalten, dies kann für die Miniview-ViewBox verwendet werden (mit einigen Feinabstimmungen). Wie Sie sehen, fügt es der Karte nicht viel Code hinzu, nur ein paar Elemente. Wenn Sie alle ViewBoxen haben, können Sie das Miniview-Attribut 'viewBox' im laufenden Betrieb mit Javascript aktualisieren.

Für die Färbung der ausgewählten Form, ich würde vorschlagen, ein <use> Element innerhalb der Miniview Hinzufügen <svg>, die eine Füllung hat, die jede Füllung in der Hauptkarte verwendet hat Vorrang vor (Sie müssen eine Stylesheet-Regel verwenden kann dies zu machen sicher, dass es eine hohe Spezifität hat, zB #miniview .activeshape { fill: red !important } hinzufügen.Lassen Sie die <use> auf die ausgewählte Form zeigen und stellen Sie sicher, dass Sie class="activeshape" auf die Form, auf die Sie zeigen, hinzufügen.

Dies sollte ein Anfang zumindest, hoffen, dass es hilft :)