Ich verwende eine SVG-Datei, um die intraregionalen Migrationsströme von Menschen in den Niederlanden darzustellen. Hier ist, was ich bisher gemacht habe:
Der Schleifenpfeil ist hier das einzige SVG-Bild, die anderen Pfeile werden auf andere Weise gerendert. Wie man sehen kann, hat der Schleifenpfeil keinen schwarzen Umriss (im Gegensatz zu den anderen Pfeilen). Ich möchte den Umrissstil und die Farbe der Pfeile einheitlich gestalten.
Zu diesem Zweck habe ich versucht, den Code der SVG-Datei anzupassen, die mir von Billy Ker ( hier ) und Simbamangu ( hier ) zur Verfügung gestellt wurde. Dies ist der Code des letzteren, der die Größe des ersteren so ändert, dass er in QGIS sichtbar ist:
<svg width=".1mm" height=".1mm" version="1.1" viewBox="0 0 2.1694 2.1665" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(.1 0 0 .1 .013859 .018301)" fill="none" image-rendering="auto" stroke="#d40000" stroke-width="2.5862">
<path d="m26.8 13.9a12.8 12.8 0 0 1-10.6 12.6 12.8 12.8 0 0 1-14.3-8.22 12.8 12.8 0 0 1 5.6-15.5 12.8 12.8 0 0 1 16.2 2.81" stop-color="#000000"/>
<path d="m24.7 0.472-0.434 5.65-5.58-0.401" stop-color="#000000" style="font-variation-settings:normal"/>
</g>
</svg>
Dadurch wird ein statisches Bild einer Schleife gerendert. Um es dynamisch zu machen, habe ich Informationen aus dieser GIS.SE-Frage verwendet, um die Farben und Umrisse in QGIS änderbar zu machen. Hier der angepasste Code:
<svg width=".1mm" height=".1mm" version="1.1" viewBox="0 0 3.1694 3.1665" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(.1 0 0 .1 .013859 .018301)" fill="none" image-rendering="auto" stroke="#d40000" stroke-width="3.0862">
<path d="m26.8 13.9a12.8 12.8 0 0 1-10.6 12.6 12.8 12.8 0 0 1-14.3-8.22 12.8 12.8 0 0 1 5.6-15.5 12.8 12.8 0 0 1 16.2 2.81" stop-color="#000000" stroke-width="param(outline-width) 50" stroke="param(outline) #000" fill="param(fill) #FFF"/>
<path d="m24.7 0.472-0.434 5.65-5.58-0.401" stop-color="#000000" fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"/>
</g>
</svg>
Dieser Code erstellt jedoch die folgende Schleife:
Also habe ich die dann entfernt
fill="param(fill) #FFF"
Teile beider Pfade, um Folgendes zu erhalten:
Leider kann ich jetzt die Farbe der Pfeile nicht mehr ändern. Also habe ich stattdessen den Code geändert in:
<svg width=".1mm" height=".1mm" version="1.1" viewBox="0 0 3.1694 3.1665" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(.1 0 0 .1 .013859 .018301)" fill="none" image-rendering="auto" stroke="#d40000" stroke-width="3.0862">
<path d="m26.8 13.9a12.8 12.8 0 0 1-10.6 12.6 12.8 12.8 0 0 1-14.3-8.22 12.8 12.8 0 0 1 5.6-15.5 12.8 12.8 0 0 1 16.2 2.81" stroke="param(outline) #000" stroke-width="param(outline-width) 40"/>
<path d="m24.7 0.472-0.434 5.65-5.58-0.401" fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="1"/>
</g>
</svg>
Das ist etwas besser. Es ist jedoch immer noch nicht ganz das, wonach ich suche, denn wenn ich jetzt die Strichfarbe auf Schwarz ändere, sieht es so aus:
Ich kann die Strichbreite anpassen, aber dann bekomme ich einen sehr dünnen Pfeil statt einer dünnen Umrisslinie des Pfeils.
Was ich möchte, ist Code für den geschlungenen Pfeil, der ihn ähnlich wie die anderen (nicht geschlungenen) Pfeile im Bild aussehen lässt. Vorzugsweise hätte die Schleife also:
Frage wissen Sie, wie ich den Code der SVG-Datei des Schleifenpfeils so ändern könnte, dass er die oben aufgeführten Eigenschaften erfüllt? (Die ersten beiden Eigenschaften sind die wichtigsten, die dritte ist vielleicht etwas schwieriger und etwas weniger wichtig, aber es wäre schön, sie zu haben.)
In Inkscape können Sie beide Pfade auswählen und Path > Stroke to path ausführen .
Dadurch werden die Striche in Umrisse mit einer Füllung umgewandelt.
Führen Sie als Nächstes Path > Union aus . Dies ist eine boolesche Operation, die die beiden Pfade zu einer festen Form zusammenführt - dh einen einzelnen geschlossenen Pfad mit einer Füllung.
Jetzt können Sie eine farbige Füllung und einen dünnen schwarzen Strich anwenden, um den gewünschten Effekt zu erzielen.
Hier ist ein Beispiel für das bereinigte SVG
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28.1mm" height="28mm" version="1.1" viewBox="0 0 28.1 28" xmlns="http://www.w3.org/2000/svg">
<g fill="#ff7f2a" stroke="#000" stroke-width=".159">
<path d="m13.9.08c-.747.00716-1.5.0746-2.24.203-1.58.274-3.14.828-4.6 1.67v-.00207c-5.85 3.39-8.42 10.5-6.09 16.9 2.31 6.35 8.88 10.1 15.5 8.93 6.65-1.16 11.5-6.95 11.5-13.7l-2.23-.0021c-.0041 5.68-4.08 10.5-9.68 11.5h-.0062c-5.61 1.01-11.1-2.15-13.1-7.5v-.0042c-1.97-5.34.187-11.3 5.11-14.2 4.27-2.48 9.53-1.98 13.2 1.05l-2.54-.181-.16 2.22 6.69.48.519-6.76-2.22-.17-.248 3.22c-2.65-2.43-6.09-3.7-9.56-3.67z" />
</g>
</svg>
Scott
Max Müller
Scott
Max Müller
Max Müller