SVG-Pfadecken durch Ändern der gefüllten Form abrunden

Um die gefüllte Ecke eines SVG-Pfads abzurunden, ändere die Pfadgeometrie. Beende beide angrenzenden geraden Segmente vor dem Eckpunkt und verbinde die neuen Endpunkte mit einer Kurve. stroke-linejoin="round" ändert den gemalten Konturauftrag an einer Verbindung; der ursprüngliche gefüllte Umriss bleibt bestehen.

Dieses Tutorial rundet eine rechtwinklige Ecke eines eigenen gefüllten Emblems ab. Du brauchst einen Texteditor und einen Browser. Am Ende hast du eine vollständige SVG mit einer kreisförmigen Rundung von 20 Einheiten, eine Prüfung des passenden Radius und die ursprüngliche eckige Datei zum Vergleichen oder Wiederherstellen.

Eine Ausrundung ersetzt eine scharfe Ecke durch eine Kurve, die ihre angrenzenden Kanten tangential trifft. Das Beispiel verwendet einen kreisförmigen Viertelbogen zwischen geraden horizontalen und vertikalen Kanten. Es rundet nicht automatisch beliebige nachgezeichnete Bézierpfade ab.

Wähle die von deiner Grafik benötigte Änderung

Die Referenz zu stroke-linejoin definiert, wie eine Kontur an Pfadecken gezeichnet wird. Verwende eine runde Verbindung, wenn du diesen gemalten Rand ändern möchtest. Um eine gefüllte Silhouette zu ändern, bearbeite ihren tatsächlichen Pfad.

Für ein einfaches Rechteck dokumentiert die SVG-rect-Referenz rx und ry. Unser Emblem hat auch eine diagonale Kante. Es in ein abgerundetes Rechteck umzuwandeln würde deshalb mehr als die ausgewählte Ecke verändern.

Geht es nur um eine lange Spitze an einer Kontur, beginne mit der Diagnose von Gehrungsspitzen. Dieser Artikel ändert stattdessen die gefüllte Geometrie.

Speichere das eckige Original

Kopiere diese vollständige Datei nach emblem-original.svg und öffne sie im Browser. Der obere rechte Eckpunkt liegt bei (170, 30). Die ankommende Kante ist horizontal, die abgehende verläuft nach unten bis (170, 100).

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H170V100L110 160H30Z"/>
</svg>

Behalte diese Datei als Vergleichsmaster. Mit stroke="#df9d34", stroke-width="8" und stroke-linejoin="round" erhält dieser Pfad einen rund gemalten Rand, während seine dunkle Füllung weiterhin die ursprüngliche scharfe Ecke erreicht.

Ersetze diese Ecke durch einen Bogen mit 20 Einheiten Radius

Verschiebe das Ende der ankommenden Linie 20 Einheiten links vom Eckpunkt auf (150, 30). Verschiebe den Anfang der abgehenden Linie 20 Einheiten nach unten auf (170, 50). Ein Kreis mit Mittelpunkt (150, 50) und Radius 20 verbindet diese Punkte als Viertelbogen.

Speichere diese zweite vollständige Datei als emblem-rounded.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z"/>
</svg>

A20 20 0 0 1 170 50 beschreibt einen Kreisbogen mit horizontalem und vertikalem Radius 20, null Drehung, kleinem Bogen und Sweep-Flag 1, der bei (170, 50) endet. Die SVG-Pfadspezifikation definiert diese Parameter. Für diese im Uhrzeigersinn verlaufende Ecke wählen sie den gewünschten Viertelkreis. Die Anleitung zu Bogen-Flags hilft bei einem Bogen, der dem falschen Verlauf folgt.

Der Kreisradius ist am ersten Endpunkt vertikal und am zweiten horizontal. Seine Tangente folgt deshalb der horizontal ankommenden und der vertikal abgehenden Linie. Eine Kurve kann rund aussehen und trotzdem einen Knick an der Verbindung bilden. Diese Konstruktion gibt diesen konkreten Kanten passende Tangentenrichtungen.

Prüfe, ob der Radius auf die vorhandenen Kanten passt

An dieser 90-Grad-Ecke benötigt eine kreisförmige Rundung entlang jeder angrenzenden Kante eine Strecke in Höhe ihres Radius. Die ankommende Strecke ist 140 Einheiten lang, die abgehende nur 70. Bei dieser Konstruktion einer einzelnen Ecke darf ein positiver Radius deshalb höchstens 70 betragen. Wähle einen kleineren Radius, wenn ein gerader Teil der abgehenden Kante erhalten bleiben soll.

Die folgende Funktion ist bewusst auf genau dieses Emblem und diese Ecke beschränkt. Führe sie in einer JavaScript-Konsole oder Node.js aus, um den Ersatzwert für d zu erzeugen.

function roundEmblemCorner(radius) {
  const incomingLength = 170 - 30;
  const outgoingLength = 100 - 30;
  if (!Number.isFinite(radius) || radius <= 0 ||
      radius > Math.min(incomingLength, outgoingLength)) {
    throw new Error('Radius must be positive and fit both adjacent edges.');
  }
  return `M30 30H${170 - radius}` +
    `A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
    'V100L110 160H30Z';
}
 
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z

Bei Radius 80 würde eine naive Konstruktion den Bogen bei (170, 110) enden lassen, hinter dem nächsten Eckpunkt (170, 100). Das anschließende V100 würde die Richtung umkehren. Weise diesen Radius zurück, statt einfach das vom Browser gezeichnete Ergebnis zu übernehmen.

Bei anderen Winkeln gerader Kanten hängt der Tangentenabstand vom Winkel ab. Für eine gewöhnliche konvexe Ecke mit Innenwinkel θ beträgt er r / tan(θ / 2). Rundest du beide Enden einer gemeinsamen Kante ab, müssen ihre beiden benötigten Strecken gemeinsam auf diese Kante passen. Konkave Ecken, vorhandene Kurven und zusammengesetzte Formen brauchen zusätzliche Geometrieentscheidungen; diese Funktion behandelt sie nicht.

Prüfe die geänderte Silhouette und behalte die Quelle

1. Öffne beide vollständigen SVG-Dateien in derselben Größe auf demselben Hintergrund.
2. Entferne vorübergehend die Kontur aus der Version mit gemalter Rundung. Ihre Füllung sollte dem eckigen Original entsprechen.
3. Vergleiche die obere rechte Kontur der abgerundeten Version. Die übrigen Seiten, diagonale Kante und gesamte Platzierung sollten dem Original entsprechen.
4. Führe die Radiusprüfung mit 20 und anschließend 80 aus. Der erste Wert erzeugt den gezeigten Pfad, der zweite löst den Radiusfehler aus.
5. Prüfe die gespeicherte SVG am vorgesehenen Einsatzort. Stelle das Original wieder her, wenn die Rundung ein bewusstes Merkmal entfernt oder die Zielanwendung das Aussehen verändert.

Methodenhinweis: Wir renderten den ursprünglichen Pfad, die Version mit runder Kontur und die ausgerundete Version in Chromium. Eine Füllprobe bei (169, 31) lag innerhalb der ersten beiden Formen und außerhalb der ausgerundeten Form. Die exakte Funktion oben akzeptierte 20 und wies 80 zurück. Wir prüften außerdem beide Bogenendpunkte anhand des Radius und der angrenzenden Tangentenrichtungen. Das verifiziert das bereitgestellte Beispiel mit geraden Kanten, keinen allgemeinen Rundungsalgorithmus oder eine Schneidmaschinenausgabe.

Wölbt sich die Kurve nach außen, prüfe Bogenendpunkt und Sweep-Flag. Bleibt ein Knick, prüfe, ob die Kurventangente zum Nachbarsegment passt. Die Anleitung zu glatten Bézierverbindungen erklärt diese separate Reparaturaufgabe. Die SVG-Bearbeitungsanleitung behandelt das Öffnen, Prüfen und Erhalten eines brauchbaren Masters.

Wo PerfectVector vor der Eckbearbeitung hilft

PerfectVector kann Vektorpfade gewinnen, wenn die Grafik nur als Rasterbild vorliegt. Prüfe zuerst den gewonnenen Umriss und entscheide anschließend, welche Ecken du in einer Kopie ändern möchtest. Der Bild-zu-Vektor-Ablauf liefert die Wiedergewinnung; er wendet diese Rundungskonstruktion nicht automatisch an.

Verwende die ursprüngliche Vektordatei, wenn sie vorhanden ist. Ein nachgezeichneter Umriss kann Béziersegmente und kleine Unregelmäßigkeiten enthalten, die nicht zu diesem Beispiel mit geraden Kanten passen. Ein einfaches beabsichtigtes Emblem neu zu zeichnen kann leichter sein, als jede nachgezeichnete Verbindung abzurunden. Behalte die freigegebene Form vor jeder bewussten Neugestaltung und nutze die Blog-Ablaufanleitungen für die nächste Übergabeprüfung.

Häufige Fragen

Warum bleibt meine Füllecke bei einer runden Konturverbindung scharf?

Die Verbindung steuert den gemalten Konturauftrag um den Pfad. Die Füllung folgt der bestehenden Pfadgeometrie und behält deshalb die ursprüngliche Ecke, bis du diese Geometrie durch eine Kurve ersetzt.

Kann ich die Funktion für jeden SVG-Pfad verwenden?

Nein. Sie behandelt eine festgelegte rechtwinklige Ecke des gezeigten Emblems mit geraden Kanten. Andere Winkel, konkave Ecken, vorhandene Kurven und Einschränkungen gemeinsamer Kanten benötigen eine eigene Konstruktion.

Macht dies eine Datei schneidfertig?

Es ändert einen gefüllten Umriss im Beispiel. Prüfe die gespeicherte Geometrie und führe die für deinen tatsächlichen Schneideplotter oder Produktionsablauf erforderlichen Kontrollen durch. Dieser Browsertest belegt kein physisches Schnittergebnis.

Quellen

1. MDN — SVG stroke-linejoin — definiert die Kontureinstellung, die im Vergleich von der Füllgeometrie unterschieden wird.
2. MDN — SVG rect — dokumentiert einfachere Radiuseinstellungen für gewöhnliche Rechtecke.
3. W3C — SVG-Befehle für elliptische Bögen — definiert Bogenradien, Flags und Endpunkt im vollständigen abgerundeten Pfad.

Wenn die ursprünglichen Pfade fehlen, gewinne deine Grafik mit PerfectVector. Prüfe ihren Umriss anhand der Referenz, speichere den gewonnenen Master und teste bewusste Eckänderungen in einer separaten Kopie in der vorgesehenen Größe.