> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# SVG-Schraffur: Echte Pfade für Stiftplotter erzeugen
> Erzeuge offene Schraffurpfade aus einer geschlossenen SVG-Fläche. Prüfe Löcher, Abstände, Winkel und gespeicherte Dateien mit einem eigenen Paper.js-Beispiel.
Source: https://perfectvector.com/de/blog/hatch-fill-svg-pen-paths
Language: de
Author: Irene Kim
Published: 2026-10-11T08:00:00+09:00
Updated: 2026-10-11T08:00:00+09:00
Um eine SVG für einen Stiftplotter zu schraffieren, erzeugst du offene Linien innerhalb der gewünschten geschlossenen Fläche, teilst sie an deren Grenzen und exportierst die verbleibenden Segmente als Geometrie. Prüfe die gespeicherte Datei vor dem Maschinenauftrag auf Routen durch Löcher oder außerhalb der Form.
Eine farbige Füllung oder gestreifte Vorschau liefert diese Zeichenrouten nicht von selbst. Dieses Tutorial erstellt ein eigenes fünfseitiges Emblem mit rechteckigem Loch, schneidet mithilfe von Paper.js offene Linien mit dieser Fläche und öffnet die gespeicherten SVGs zur Prüfung erneut. Die Prüfungen belegen digitale Mittelliniengeometrie, keinen erfolgreichen physischen Plot.
## 1. Wähle eine Fläche zum Füllen, keine wiederzugewinnende Linie
Du brauchst eine geschlossene Fläche, deren Löcher Teil ihrer Geometrie sind. Ein weißes Rechteck über einer Vollform kann wie ein Loch aussehen und die darunterliegende Fläche trotzdem intakt lassen. Die [Schraffurdokumentation von GRBL-Plotter](https://grbl-plotter.de/index.php?id=hatch-fill) zeigt diesen Unterschied zwischen überlappenden Objekten und einer Öffnung innerhalb eines Pfads. Wir führten GRBL-Plotter hier nicht aus.
Wenn du einen einzelnen Strich durch die Mitte einer dicken Rasterlinie gewinnen möchtest, nutze die [Anleitung zu einlinigen SVGs](https://perfectvector.com/de/blog/drawing-to-single-line-svg). Schraffieren erzeugt mehrere Striche über eine Fläche; es gewinnt keine ursprüngliche Stiftmittellinie zurück.
Behalte eine Kopie der gefüllten Grafik. Das Beispiel erzeugt bewusst Schraffurrouten ohne zusätzlichen Umrissdurchgang. Wenn du auch die Außen- oder Lochgrenze zeichnen möchtest, bereite sie als separate, bewusst gewählte Routen vor.
## 2. Unterscheide beschnittenes Aussehen und gekürzte Pfade
Ein SVG-[Muster](https://www.w3.org/TR/SVG2/pservers.html#Patterns) malt eine wiederholte Kachel. Ein [Beschneidungspfad](https://www.w3.org/TR/css-masking-1/#ClippingPaths) begrenzt den gerenderten Bereich, ohne die zugrunde liegende Geometrie zu ändern. Beide können ein sinnvolles Bildschirmbild erzeugen, doch eine Anwendung braucht weiterhin eine Methode, um daraus Stiftrouten zu machen.
Unsere nur beschnittene Kontrollversion speichert zehn horizontale Linien von jeweils 200 Benutzereinheiten Länge. Die Beschneidung verbirgt deren äußere Teile und die rechteckige Öffnung. Die gespeicherten Linienlängen ergeben weiterhin insgesamt 2000 Einheiten.
Der gekürzte grobe Export enthält 14 separate offene Pfade mit insgesamt 1320 Einheiten. Er hat weder Beschneidungspfad noch Muster, Maske, eingebettetes Bild oder wiederverwendetes Symbol. Vier Schraffurzeilen teilen sich um das Loch in je zwei Pfade. Dieser Unterschied ist in der gespeicherten SVG prüfbar, selbst wenn beschnittene und gekürzte Vorschauen gleich aussehen.
*Eigene digitale Beispieldatei und tatsächliche Paper.js-Exporte. Das Loch bleibt in allen drei Routendateien offen. Die Prüfungen betreffen Mittellinien; es wurde weder ein Plotter- noch ein physischer Stifttest durchgeführt.*
Die [Anleitung zu SVG-Mustereinheiten](https://perfectvector.com/de/blog/svg-pattern-units) behandelt wiederholten Farbauftrag, wenn dieser die gewünschte Ausgabe ist. Hier wird explizite offene Geometrie benötigt.
## 3. Führe das vollständige Paper.js-Beispiel aus
Verwende einen Browser, einen Texteditor und den vollständigen Paper.js-0.12.18-Build aus der [offiziellen Veröffentlichung](https://github.com/paperjs/paper.js/releases/tag/v0.12.18). Lege `paper-full.min.js` in einen Ordner `library`. Speichere dieses HTML als `generate.html` und das folgende JavaScript als `hatch.js` neben diesem Ordner. Das eigene Emblem ist im Code enthalten.
```html
Generate original hatch routes
Running
0 degrees, 10-unit spacing
0 degrees, 5-unit spacing
30 degrees, 10-unit spacing
```
```javascript
paper.setup(document.getElementById('work'));
// Original area: a five-sided boundary with a rectangular hole.
const areaData = 'M20 20 L140 20 L180 60 L180 120 L20 120 Z ' +
'M60 50 L60 90 L110 90 L110 50 Z';
const configurations = [
{ id: 'coarse', angle: 0, spacing: 10 },
{ id: 'dense', angle: 0, spacing: 5 },
{ id: 'angled', angle: 30, spacing: 10 }
];
function makeHatch(angle, spacing) {
const area = new paper.CompoundPath({
pathData: areaData,
fillRule: 'nonzero',
insert: false
});
const radians = angle * Math.PI / 180;
const direction = new paper.Point(Math.cos(radians), Math.sin(radians));
const normal = new paper.Point(-direction.y, direction.x);
const center = new paper.Point(100, 70);
const delivery = new paper.Group({ insert: false });
for (let offset = -200 + spacing / 2; offset < 200; offset += spacing) {
const origin = center.add(normal.multiply(offset));
const line = new paper.Path.Line({
from: origin.subtract(direction.multiply(300)),
to: origin.add(direction.multiply(300)),
insert: false
});
const kept = line.intersect(area, { trace: false, insert: false });
const parts = kept instanceof paper.CompoundPath ? [...kept.children] : [kept];
const routes = parts.filter(path => path.length > 1e-7);
for (const path of routes) {
if (path.closed || path.segments.length !== 2) {
throw new Error('Expected one open straight segment');
}
if (path.firstSegment.point.dot(direction) > path.lastSegment.point.dot(direction)) {
path.reverse();
}
}
routes.sort((a, b) => a.firstSegment.point.dot(direction) - b.firstSegment.point.dot(direction));
for (const path of routes) {
path.fillColor = null;
path.strokeColor = '#2f6977';
path.strokeWidth = 1;
path.strokeCap = 'butt';
delivery.addChild(path);
}
if (kept instanceof paper.CompoundPath || routes.length === 0) {
kept.remove();
}
line.remove();
}
area.remove();
const geometry = delivery.exportSVG({ asString: true, precision: 6 });
const svg = '';
const routeCount = delivery.children.length;
const drawnLength = delivery.children.reduce((sum, path) => sum + path.length, 0);
let transitionLength = 0;
for (let index = 1; index < routeCount; index += 1) {
transitionLength += delivery.children[index - 1].lastSegment.point
.getDistance(delivery.children[index].firstSegment.point);
}
delivery.remove();
return { svg, routeCount, drawnLength, transitionLength };
}
const receipt = { paper: paper.version, units: 'viewBox user units; 0.5 mm per unit', rows: [] };
for (const configuration of configurations) {
const result = makeHatch(configuration.angle, configuration.spacing);
document.getElementById('svg-' + configuration.id).textContent = result.svg;
const preview = document.getElementById('preview-' + configuration.id);
preview.src = URL.createObjectURL(new Blob([result.svg], { type: 'image/svg+xml' }));
receipt.rows.push({ ...configuration, route_count: result.routeCount,
drawn_length: result.drawnLength, transition_length: result.transitionLength });
}
document.getElementById('export-receipt').textContent = JSON.stringify(receipt, null, 2);
document.getElementById('status').textContent = 'Generated. Save each exact SVG shown below, then reopen those saved files for independent checks.';
```
Öffne `generate.html` im Browser. Wir führten dies mit Paper.js 0.12.18 in Chromium 155 aus. Jedes Ergebnis zeigt eine Vorschau und seinen exakten SVG-Quelltext. Kopiere die drei vollständigen SVG-Zeichenfolgen nach `hatch-coarse.svg`, `hatch-dense.svg` und `hatch-angled.svg` und öffne diese gespeicherten Dateien anschließend unabhängig voneinander.
Der entscheidende Aufruf ist `line.intersect(area, { trace: false, insert: false })`. Paper.js dokumentiert [`trace: false`](https://paperjs.org/reference/pathitem/#intersect-path) als Teilen des ersten Pfads an Schnittpunkten und Beibehalten seiner Kurven innerhalb der Fläche des zweiten Pfads. Dadurch bleiben die offenen Schraffursegmente erhalten. Der standardmäßige Flächennachzeichnungsmodus beantwortet eine andere boolesche Frage; die [Paper.js-Anleitung zu gefüllten Formen](https://perfectvector.com/de/blog/paperjs-svg-booleans) behandelt diesen Ablauf.
Die Funktion setzt `fillColor` auf null und gibt jeder Route eine Kontur. Vor dem Export prüft sie außerdem auf offene Ergebnisse mit zwei Punkten. Die geschlossene Fläche bleibt eine Konstruktionshilfe und wird nicht in die Liefergruppe aufgenommen.
## 4. Prüfe Abstand, Winkel und physischen Maßstab gemeinsam
Alle drei Exporte deklarieren `width="100mm"`, `height="70mm"` und `viewBox="0 0 200 140"`. Dadurch entspricht eine Benutzereinheit in der SVG 0.5 mm. Ein Schraffurabstand von 10 Einheiten steht somit für 5 mm; 5 Einheiten entsprechen 2.5 mm.
Diese bewusst weiten Beispielabstände machen die einzelnen Routen leicht prüfbar. Sie sind keine Empfehlungen für deckenden Tintenauftrag. Die Bildschirmkontur ist eine Benutzereinheit breit, doch ihr Aussehen misst nicht die Spur eines echten Stifts auf einem Material.
Die Versatzschleife legt die Schraffurphase auf einen halben Abstand fest. Eine Phasenänderung kann beeinflussen, welche Grenzmerkmale eine Linie trifft. Bei positiven 30° verläuft die Richtung in diesem SVG-Koordinatensystem nach rechts unten. Der Abstand wird senkrecht zu den parallelen Linien gemessen, nicht als ihre vertikale Trennung auf dem Bildschirm.
| Gespeicherte Datei | Winkel | Abstand | Offene Routen | Gezeichnete Mittellinienlänge |
| ------------------ | ------ | -------------------- | ------------- | ------------------------------------ |
| `hatch-coarse.svg` | 0° | 10 Einheiten / 5 mm | 14 | 1320 Einheiten / 660 mm |
| `hatch-dense.svg` | 0° | 5 Einheiten / 2.5 mm | 28 | 2640 Einheiten / 1320 mm |
| `hatch-angled.svg` | 30° | 10 Einheiten / 5 mm | 20 | Etwa 1318.564 Einheiten / 659.282 mm |
Wir berechneten die erwarteten Linien-/Polygonschnittpunkte unabhängig und verglichen anschließend die gespeicherten Koordinaten mit einer Toleranz von 0.000002 Benutzereinheiten. Jede exportierte Route entsprach ihren erwarteten Endpunkten. Jede Route war offen, und kein geprüfter Mittellinienpunkt verlief jenseits dieser Toleranz durch das Loch oder den Außenbereich. Alle drei gespeicherten SVGs behielten die deklarierte Zuordnung zur physischen Größe.
Prüfe bei einer anderen Form die tatsächlich exportierten Routen, statt dieselben Anzahlen wie in diesem Beispiel anzunehmen. Kurven, sehr kleine Lücken, Selbstüberschneidungen, transformierte Gruppen und beliebige importierte SVG-Dokumente liegen außerhalb des Testumfangs dieses Beispiels.
## 5. Trenne Routenlücken und optimierten Fahrplan
Die grobe Datei besitzt 14 offene Routen und 13 Lücken zwischen aufeinanderfolgenden Routen in ihrer gespeicherten Reihenfolge. Diese Lücken mit abgesenktem Stift zu verbinden würde unerwünschte Markierungen erzeugen. Dein Plotablauf muss Übergänge vor dem Zeichnen wie beabsichtigt behandeln.
Das Skript behält eine einfache Reihenfolge in einer Richtung bei: Es durchläuft Schraffurversätze nacheinander und folgt jedem Segment in derselben Richtung. Die geraden Abstände vom Ende jeder Route zum Anfang der nächsten ergeben für die grobe Datei insgesamt etwa 1562.997 Benutzereinheiten. Die dichtere Datei hat 27 Lücken und eine Verbindungssumme von etwa 3281.578 Einheiten.
Diese Summen schließen den anfänglichen Anfahrweg und die abschließende Rückkehr aus. Sie sind geometrische Folgen dieser Reihenfolge, keine gemessenen Maschinenwege, Zeitschätzung oder optimierter Plan. Eine Plotanwendung kann Routen umkehren oder neu ordnen. Den Abstand zu halbieren verdoppelte in diesem Beispiel gezeichnete Länge und Routenzahl; daraus folgt keine allgemeine Verdopplung der Auftragszeit.
Öffne die Datei in der Anwendung, die deinen Plotter steuert, prüfe ihre Größe und betrachte Routenvorschau und Stiftanhebung. Teste Stift, Material, Abstand, Randfreiraum und Bewegungseinstellungen an deinem eigenen Aufbau. Wir führten keinen Plotterauftrag aus, erzeugten keinen Maschinencode und testeten Cricut Draw/Attach nicht.
## Behebe häufige Geometriefehler
| Symptom | Was du prüfst und änderst |
| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Die Schraffur durchquert das vorgesehene Loch | Prüfe die gefüllte Fläche. Ersetze eine weiße Überlagerung vor dem Schneiden durch eine tatsächliche Öffnung in der zusammengesetzten Geometrie. |
| Die Vorschau stimmt, aber vollständige Linien bleiben | Suche nach einer Beschneidungs- oder Musterabhängigkeit. Prüfe die gespeicherten Routenkoordinaten, statt dich auf die gerenderte Silhouette zu verlassen. |
| Linien werden zu geschlossenen Formen | Bestätige, dass der erste Operand eine offene Linie ist und `trace: false` vorhanden ist. Das Beispiel weist geschlossene Ergebnisse oder solche mit mehreren Segmenten zurück. |
| Tinte reicht über eine Grenze hinaus | Unterscheide Mittellinie und Konturfläche. Dieses Beispiel zieht die Fläche nicht um einen Stiftspitzenradius nach innen; bereite geeigneten Freiraum vor und teste das tatsächliche Werkzeug. |
| Die Füllung ist lückenhaft oder die Oberfläche wird zu nass | Passe anhand eines kontrollierten Stift-/Materialmusters an. Der digitale Abstand allein belegt weder Deckung noch Trocknungsverhalten. |
| Die Datei macht unerwartete Sprünge | Prüfe Reihenfolge und Übergänge mit angehobenem Stift in der Zielsoftware. Behalte die Originalrouten vor dem Optimieren und prüfe Löcher und Grenzen anschließend erneut. |
Liegt die Vorlage nur als flächige Rastersilhouette vor, kann PerfectVectors [Clipart-zu-SVG-Ablauf](https://perfectvector.com/de/clipart-to-svg) zuerst geschlossene Grafiken gewinnen. Prüfe Umriss und jede Öffnung und erzeuge anschließend Schraffurrouten aus der akzeptierten Geometrie. Vorhandene saubere Vektorgrafiken können direkt zur Schraffurvorbereitung gehen.
Silhouette vektorisieren und Schraffurrouten erzeugen sind separate Schritte. Das eigene Emblem dieses Artikels wurde als Vektorgeometrie erstellt; es ist kein PerfectVector-Konvertierungsbeispiel.
## Häufige Fragen
**Wird eine SVG-Füllung automatisch zur Stiftschraffur?**
Nein. Eine Füllung beschreibt gemaltes Aussehen. Ein Plotablauf benötigt Schraffurrouten oder einen anderen unterstützten Weg, um Zeichenstriche aus dieser Fläche zu erzeugen.
**Warum enthält meine Schraffurvorschau weiterhin Linien durch das Loch?**
Eine Beschneidung kann Teile vollständiger Linien verbergen, ohne ihre gespeicherte Geometrie zu kürzen. Prüfe die gespeicherten Koordinaten und mache das Loch vor dem Erzeugen expliziter Routen zu einem Teil der tatsächlichen Fläche.
**Welchen Schraffurabstand sollte ich verwenden?**
Wähle ihn durch einen Stift- und Materialtest im vorgesehenen Maßstab. Dieses digitale Beispiel verwendet 5 mm und 2.5 mm Abstand, um Routen sichtbar zu machen. Es belegt weder deckenden Auftrag noch eine allgemeine Stifteinstellung.
**Ist das ein einzelner durchgehender Pfad?**
Nein. Das grobe Ergebnis enthält 14 separate offene Routen. Sein Loch teilt vier Zeilen, und der Zeichenablauf muss die Lücken zwischen Routen ohne unerwünschte Markierungen behandeln.
## Quellen
1. [Paper.js-PathItem-Schnittmenge](https://paperjs.org/reference/pathitem/#intersect-path) — dokumentiert das Teilen offener Pfade mit trace false.
2. [SVG-Muster](https://www.w3.org/TR/SVG2/pservers.html#Patterns) — definiert wiederholten Farbauftrag getrennt von expliziter Routengeometrie.
3. [CSS-Maskierung und Beschneidungspfade](https://www.w3.org/TR/css-masking-1/#ClippingPaths) — erklärt, warum Beschneiden die Darstellung ändert, ohne die zugrunde liegende Form zu kürzen.
4. [GRBL-Plotter-Schraffurfüllung](https://grbl-plotter.de/index.php?id=hatch-fill) — zeigt den Unterschied zwischen überlagerten Objekten und einem Loch innerhalb eines Pfads.
5. [Paper.js-0.12.18-Veröffentlichung](https://github.com/paperjs/paper.js/releases/tag/v0.12.18) — benennt die Bibliotheksversion des ausführbaren Beispiels.
Wenn eine reine Rastersilhouette bearbeitbare Grenzen braucht, [bereite einen Clipart-SVG-Kandidaten vor](https://perfectvector.com/de/clipart-to-svg), prüfe seine Löcher und erzeuge und verifiziere die Schraffurrouten separat, bevor du den physischen Auftrag testest.
## Explore
- [Read the HTML article](https://perfectvector.com/de/blog/hatch-fill-svg-pen-paths)
- [SVG-Falzlinien und Schnittlinien: Die Geometrie lesen](https://perfectvector.com/de/blog/svg-score-lines-vs-cut-lines.md)
- [Glasätzschablonen: Welche Teile werden entfernt?](https://perfectvector.com/de/blog/glass-etching-stencil-polarity.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)