Anpassen einer Schleifenpfeil-SVG-Datei, um den Stil mit anderen Pfeilen abzugleichen

Ich verwende eine SVG-Datei, um die intraregionalen Migrationsströme von Menschen in den Niederlanden darzustellen. Hier ist, was ich bisher gemacht habe:

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

Also habe ich die dann entfernt

fill="param(fill) #FFF"

Teile beider Pfade, um Folgendes zu erhalten:

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

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:

  • Ein dünner schwarzer Umriss des gesamten Pfeils;
  • Eine modifizierbare Pfeilbreite, die proportional zur Größe der Pfeilspitze ist;
  • Der Pfeil beginnt etwas weniger breit und wird zum Ende hin etwas breiter, wie die anderen Pfeile

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.)

Können Sie nicht einfach den gewünschten Pfeil in Inkscape zeichnen und als SVG speichern? Warum müssen Sie ein vorhandenes SVG bearbeiten? Und darüber hinaus ... warum müssen Sie das XML der SVG bearbeiten?
@Scott Ich könnte es versuchen, aber ich habe noch nie Inkscape oder ein vergleichbares Programm verwendet. Ich fürchte, es würde lange dauern.
Es könnte länger dauern, bis Sie versuchen, die Änderungen in XML herauszufinden.
@Scott Vielleicht. Ich hoffe nur, dass dies eine relativ einfache Aufgabe ist – entweder durch Ändern des XML-Codes oder Zeichnen des Pfeils – für jemanden hier drüben mit viel Erfahrung und Wissen über SVG-Dateien und/oder Inkscape. Ich werde auch den Leuten Anerkennung zollen, die Antworten auf diese Frage und verwandte Fragen in dem Artikel gegeben haben, den ich darüber schreiben möchte. Mein Hintergrund im Grafikdesign ist sehr begrenzt. Es ist wahrscheinlich eine gute Idee für mich, mehr darüber für zukünftige Projekte zu lernen, aber im Moment hoffe ich, dass mir jemand helfen kann.
@Scott Außerdem: Meine Version von Inkscape bricht auf meinem (Mac-) Computer immer wieder zusammen. Und XML-Codeschnipsel wie * fill="param(fill) #FFF" * ermöglichen, dass das Bild in QGIS geändert werden kann.

Antworten (1)

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.

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

Jetzt können Sie eine farbige Füllung und einen dünnen schwarzen Strich anwenden, um den gewünschten Effekt zu erzielen.

Geben Sie hier die Bildbeschreibung ein

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>
Nochmals vielen Dank!
Gibt es in diesem Fall auch einen XML-Parameter, der die Dicke des Pfeils und der Pfeilspitze steuern kann?
Nein, nicht nachdem Sie den Pfeil umrissen haben. Es ist kein Strich mehr, sondern ein Pfad mit einem Strich außen und einer Füllung innen.
Diese Bearbeitung ist destruktiv. Wenn Sie es also tun müssen, erstellen Sie eine Kopie des Originals, falls Sie jemals einen dickeren Pfeil benötigen.
@MaxMuller - Entschuldigung, ich habe vergessen, diesen Kommentaren Ihren Namen hinzuzufügen.
Das ist okay. Danke schön. Ich denke immer noch darüber nach, wie der Pfeilpfad in QGIS dicker und dünner gemacht werden könnte. Wenn Sie eine Idee dazu haben, können Sie mir diese bitte mitteilen?
Es scheint, dass etwas Ähnliches wie das, was ich mir vorstelle, durch Ändern des "Anfangs" eines Pfads erreicht werden kann, siehe 10:18 von youtube.com/watch?v=yGFp4EoJi9g . Wissen Sie, ob dies ein Parameter ist, der über QGIS änderbar gemacht werden kann, indem der Pfad im XML angepasst wird?
@MaxMuller In Inkscape gibt es einen dynamischen Offset- und einen Offset-Pfad-Effekt, aber diese sind nicht Teil des SVG-Formats selbst. Beim Speichern einer optimierten SVG aus Inkscape werden diese wieder in unveränderbare Pfade umgewandelt. Wenn Sie ein Inkscape-SVG speichern, das Inkscapes eigenes XML enthält, bleiben die Anfangseffekte bearbeitbar, aber außerhalb von Inkscape funktionieren diese wahrscheinlich nicht in einer anderen Anwendung.