Gepunktete SVG-Konturen: Abstände und runde Enden

Für eine gepunktete SVG-Kontur gibst du der Form eine Kontur, setzt stroke-linecap="round" und verwendest einen Strich der Länge null mit anschließender positiver Lücke, etwa stroke-dasharray="0 20". Die Konturbreite bestimmt den Punktdurchmesser. Die zweite Zahl des dash-array bestimmt den Abstand entlang des Pfads zwischen den Punktmittelpunkten; sie ist nicht der Leerraum zwischen ihren sichtbaren Kanten.

Dieser Unterschied zählt, wenn ein Rand nach dem Abrunden seiner Strichenden gedrängt aussieht. Bei einem geschlossenen Abzeichen kommt ein weiteres Problem hinzu: Die Wiederholung kann den Startpunkt mit einem kürzeren Restintervall erreichen. Die folgenden Beispiele trennen Endform, sichtbaren Abstand und Schlussstelle, damit du den richtigen Wert anpassen kannst.

Das sind dekorative Kontureinstellungen. Sie erzeugen weder eine neue versetzte Kontur noch verwandeln sie jeden gezeichneten Punkt in einen separaten Schneidepfad.

Vergleiche gerade Enden, runde Enden und Punkte

stroke-dasharray wechselt zwischen gezeichneten Strichlängen und ungezeichneten Lückenlängen. Eine Liste mit zwei Zahlen macht diese Wiederholung leicht prüfbar. Die dash-array-Referenz von MDN erklärt auch, wie eine Liste mit ungerader Länge wiederholt wird, um eine Folge mit gerader Länge zu bilden.

Kopiere dieses eigenständige SVG in eine Datei und öffne sie in einem Browser. Jeder der selbst erstellten Pfade ist 240 Einheiten lang und hat eine Konturbreite von 8:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

Die erste Zeile verwendet 12 20 mit geraden Enden. Ihre vollständigen Striche belegen 12 Einheiten und lassen 20 Einheiten sichtbaren Leerraum. Die zweite Zeile verwendet dieselben Zahlen mit runden Enden. Jedes Ende reicht 4 Einheiten über den zugrunde liegenden Strichendpunkt hinaus, sodass ein vollständiger Strich 20 Einheiten belegt und die sichtbare Lücke auf 12 schrumpft.

Die dritte Zeile ändert die Strichlänge auf null. Runde Enden erzeugen auf diesem geraden Pfad Punkte mit Durchmesser 8 und 20 Einheiten Abstand zwischen ihren Mittelpunkten. Ihre sichtbare Lücke von Kante zu Kante beträgt 12 Einheiten. Die SVG-Zeichenregeln des W3C definieren Strichenden einschließlich der Behandlung von Strichen mit Länge null; die Referenz zu Strichenden von MDN erklärt ihre Geometrie.

Für vollständige, getrennte Striche auf einem geraden Segment ohne Entfernungskalibrierung oder Transformation sind diese Berechnungen nützlich:

• Gerades Ende: sichtbare Strichlänge = dash; sichtbare Lücke = gap.
• Rundes Ende: sichtbare Strichlänge = dash + stroke-width; sichtbare Lücke = gap - stroke-width.
• Runder Punkt: Durchmesser = stroke-width; Mittelpunktabstand = gap; sichtbare Lücke = gap - stroke-width.

Wenn die letzte Berechnung null oder negativ ergibt, berühren oder überlappen sich die Punkte. An Biegungen unterscheidet sich der Abstand entlang des Pfads vom direkten Abstand zwischen den Punkten. Prüfe Ecken und Kurven, statt die Lückenberechnung für gerade Linien auf die gesamte Kontur anzuwenden.

Passe die Wiederholung um ein geschlossenes Abzeichen an

Die folgenden rechteckigen Abzeichenpfade messen jeweils 180 mal 120 Einheiten. Ihr Umfang beträgt 2 × (180 + 120) = 600. Der Pfad beginnt an der linken oberen Ecke und läuft im Uhrzeigersinn.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

Links platziert 0 32 die Punktmittelpunkte bei den Pfadentfernungen 0, 32, 64 und so weiter bis 576. Es bleiben nur 24 Einheiten, bevor der Pfad zu seinem Start zurückkehrt. Das Schlussintervall ist kürzer als die übrigen Intervalle von 32 Einheiten, sodass die Schlussstelle ungleichmäßig ist. Eine größere SVG-Darstellung vergrößert diese Abweichung, ohne sie zu lösen.

Rechts teilt 0 30 den Umfang in 20 gleich große Intervalle. Bei diesem konkreten Rechteck sind auch beide Seitenlängen durch 30 teilbar, sodass Punkte auf den Ecken liegen. Auf jeder geraden Seite lassen die Punkte mit 8 Einheiten Durchmesser 22 Einheiten sichtbaren Leerraum. Das korrigiert die Wiederholung dieses Abzeichens; es verspricht keine identischen sichtbaren Abstände auf jeder gekrümmten Kontur.

Wähle für deine eigene Kontur eine gewünschte Punktanzahl und teile den Umfang des Pfads durch diese Anzahl, um einen anfänglichen Wiederholungsabstand zu erhalten. Prüfe dann das tatsächliche Rendering, besonders Biegungen, kleine Details und den Schlusspunkt. Eine Form mit mehreren getrennten Teilpfaden braucht besondere Aufmerksamkeit, weil das Strichmuster für jeden Teilpfad neu beginnt, wie die SVG-Zeichenspezifikation beschreibt.

stroke-dashoffset verschiebt die Startposition des Musters entlang des Pfads. Es kann eine auffällige Schlussstelle an einen weniger sichtbaren Ort setzen, macht aber eine Wiederholung von 32 Einheiten nicht zum Teiler von 600. Verwende eine angepasste Wiederholung, wenn ein gleichmäßiger Schluss das Ziel ist. Die dash-offset-Referenz von MDN dokumentiert diese Phasenanpassung.

Wir öffneten beide eigenständigen SVG-Dateien unabhängig voneinander und prüften ihre Browser-Darstellung gegen diesen Vergleich. Die Beispiele verwenden einheitenlose Werte, keine pathLength-Kalibrierung, keine Transformationen und kein externes CSS. Sie demonstrieren diese von Hand erstellten Pfade, keine PerfectVector-Konvertierung und keinen anwendungsübergreifenden Kompatibilitätstest.

Halte Größen- und Farbgebungseinstellungen konsistent

Beginne wie oben mit numerischen Werten in den eigenen SVG-Koordinaten. Ersetze sie nicht durch Prozentwerte in der Annahme, diese entsprächen demselben Anteil des Pfadumfangs. Die dash-array-Referenz beschreibt die Auflösung von Prozentwerten relativ zum Viewport, nicht zur Pfadlänge.

Wenn du pathLength zur Normalisierung von Entfernungen verwendest, berechne das Strichmuster in diesem kalibrierten Entfernungssystem. Mische nicht den unkalibrierten Umfang aus diesem Beispiel mit normalisierten Strichwerten eines anderen Snippets. Der Leitfaden zur SVG-Konturanimation zeigt eine andere Verwendung nativer Pfadlängenkalibrierung für eine schrittweise gezeichnete Darstellung.

Setze fill="none", wenn du nur den Rand möchtest. Eine Füllung kann sichtbar bleiben, auch wenn ein Teil der Kontur gestrichelt ist. Wenn die erwarteten Punkte verschwinden, bestätige, dass das Element eine sichtbare Kontur hat und keine CSS-Regel seine Präsentationsattribute überschrieben hat. Die Checkliste für fehlende Konturen behandelt diese Prüfungen, bevor du Abstände änderst.

Lass um die Geometrie genügend Raum für ihre Kontur. Eine Kontur von 8 Einheiten ragt über den Pfad hinaus, und runde Enden ragen über offene Endpunkte hinaus. Das Beispiel enthält Ränder, damit der Viewport seine Punkte nicht abschneidet. Teste dein ausgeliefertes SVG in der tatsächlichen Darstellungsgröße; winzige Punkte, die in einer vergrößerten Vorschau deutlich getrennt wirken, können in einem Icon schwer erkennbar sein.

Trenne Grafikvorbereitung und Randgestaltung

Wenn das Motiv innerhalb eines Abzeichens nur als PNG oder JPG vorliegt, kann PerfectVectors Bild-zu-Vektor-Ablauf bearbeitbare SVG-Grafik für dieses Motiv vorbereiten. Vergleiche Silhouette, kleine Öffnungen und separate Bereiche mit dem Originalbild, bevor du es in deinem Rand platzierst. Behalte die dekorative Kontur als separate Form, damit sich Konturbreite und Punktabstände unabhängig ändern lassen.

Behalte eine vorhandene Vektor-Masterdatei. Ein Rechteck oder anderer einfacher Rand lässt sich meist direkt im Editor zeichnen. Vektorisierung entwirft nicht automatisch einen versetzten Rand, rekonstruiert keine einzelne Mittellinie und wählt keine Strichabstände. Wenn ein nachgezeichnetes dickes Motiv zwei Grenzen hat, erklärt der Leitfaden zu einlinigen SVGs, warum das etwas anderes ist als eine einzelne Zeichenbahn.

Geh bei einem Schneideablauf nicht davon aus, dass die Maschine dekorative Konturfarbe als einzelne punktförmige Schnitte interpretiert. Bereite die gewünschte Geometrie in einem Editor vor und prüfe die Vorschau der Zielanwendung. Dieser Artikel testet die Browser-Darstellung, nicht das Verhalten von Schneidemaschinen. Die Bearbeitungsleitfäden im Blog behandeln verwandte Entscheidungen zur Dateivorbereitung.

Prüfe die endgültige Kontur

Prüfe vor dem Akzeptieren der Datei den kurzen offenen Pfad und den geschlossenen Rand separat. Bestätige Endstil, Konturbreite und Wiederholungszahlen; prüfe anschließend die ersten und letzten Markierungen des offenen Pfads und die Schlussstelle des geschlossenen Pfads. Prüfe enge Kurven in der Größe, in der die Grafik verwendet wird.

Öffne das gespeicherte SVG erneut in seiner vorgesehenen Zielumgebung. Wenn du bearbeitbare dekorative Farbgebung brauchst, behalte die Kontureigenschaften. Wenn das Ziel dauerhafte Konturen braucht, führe diese Umwandlung als separaten Bearbeitungsschritt durch und prüfe sie. Behalte eine bearbeitbare Quellkopie, damit du die Abstände später ändern kannst.

FAQ

Warum wirken meine Striche nach dem Wählen runder Enden enger? Runde Enden ragen über beide Strichenden hinaus. Auf einem geraden Segment ist die sichtbare Lücke zwischen vollständigen Strichen die angegebene Lücke minus Konturbreite, sofern die Markierungen getrennt bleiben.

Wie erstelle ich runde Punkte statt kurzer Kapseln? Verwende einen Strich der Länge null, eine positive Lücke und runde Enden. Eine Konturbreite von 8 mit stroke-dasharray="0 20" erzeugt beispielsweise auf einem geraden Pfad Punkte mit 8 Einheiten Durchmesser und 20 Einheiten Mittelpunktabstand.

Warum ist eine Lücke entlang einer geschlossenen Kontur anders? Die Wiederholung teilt den Umfang möglicherweise nicht gleichmäßig. Passe die Wiederholung an die Pfadlänge an und prüfe dann Schlusspunkt und Ecken. Eine Änderung des dash-offset verschiebt die Phase des Musters, behebt aber nicht die rechnerische Abweichung.

Quellen

1. MDN — stroke-dasharray — Definiert die abwechselnde Strich- und Lückenliste sowie die Behandlung ihrer Werte.
2. MDN — stroke-linecap — Erklärt die Geometrie gerader und runder Enden und das Verhalten bei Länge null.
3. W3C — SVG Painting — Spezifiziert Strichdarstellung, Endbehandlung und Musterverarbeitung auf Teilpfaden.
4. MDN — stroke-dashoffset — Definiert den Versatz zum Verschieben eines Strichmusters.

Wenn das Motiv deines Abzeichens als Rasterbild vorliegt, bereite mit PerfectVector eine SVG-Version zur Prüfung vor, prüfe ihre Konturen und Öffnungen und füge den gepunkteten Rand als separate bearbeitbare Form hinzu.