> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Relleno rayado SVG: trazados reales para plóteres de pluma
> Genera trazados abiertos de rayado dentro de un área SVG cerrada. Reproduce comprobaciones de agujeros, espaciado, ángulo y archivo guardado con un ejemplo original de Paper.js.
Source: https://perfectvector.com/es/blog/hatch-fill-svg-pen-paths
Language: es
Author: Irene Kim
Published: 2026-10-11T08:00:00+09:00
Updated: 2026-10-11T08:00:00+09:00
Para rellenar un SVG con rayado para un plóter de pluma, genera líneas abiertas dentro del área cerrada prevista, divídelas en sus límites y exporta los segmentos restantes como geometría. Comprueba el archivo guardado en busca de recorridos que atraviesen agujeros o salgan de la forma antes de preparar el trabajo de la máquina.
Un relleno de color o una vista previa con rayas no proporciona por sí solo esos recorridos de dibujo. Este tutorial construye un emblema original de cinco lados con un agujero rectangular, usa Paper.js para intersecar líneas abiertas con esa área y reabre los SVG guardados para inspeccionarlos. Las comprobaciones demuestran geometría digital de línea central, no un dibujo físico correcto.
## 1. Elige un área que rellenar, no una línea que recuperar
Necesitas una región cerrada cuyos agujeros formen parte de su geometría. Un rectángulo blanco sobre una forma sólida puede parecer un agujero y aun así dejar intacta la región inferior. La [documentación de relleno rayado de GRBL-Plotter](https://grbl-plotter.de/index.php?id=hatch-fill) ilustra esta distinción entre objetos superpuestos y una abertura dentro de un trazado. No ejecutamos GRBL-Plotter aquí.
Si quieres recuperar un solo trazo por el centro de una línea ráster gruesa, usa la [guía de SVG de una sola línea](https://perfectvector.com/es/blog/drawing-to-single-line-svg). El rayado crea múltiples trazos sobre un área; no recupera la línea central original de un pluma.
Conserva una copia del diseño relleno. El ejemplo produce deliberadamente recorridos de rayado sin añadir una pasada de contorno. Si también quieres dibujar el límite exterior o el del agujero, prepáralos como recorridos separados e intencionales.
## 2. Distingue el aspecto recortado de los trazados cortados
Un [patrón](https://www.w3.org/TR/SVG2/pservers.html#Patterns) SVG pinta un mosaico repetido. Un [trazado de recorte](https://www.w3.org/TR/css-masking-1/#ClippingPaths) restringe la región renderizada sin modificar la geometría subyacente. Ambos pueden crear una imagen útil en pantalla, pero una aplicación aún necesita un método para convertir ese aspecto en recorridos de pluma.
Nuestro control con solo recorte almacena diez líneas horizontales de 200 unidades de usuario cada una. El recorte oculta sus partes exteriores y la abertura rectangular. Las longitudes de las líneas guardadas siguen sumando 2000 unidades.
La exportación cortada de rayado amplio contiene 14 trazados abiertos separados que suman 1320 unidades. No tiene trazado de recorte, patrón, máscara, imagen incrustada ni símbolo reutilizado. Cuatro filas de rayado se dividen en dos trazados alrededor del agujero. Esa diferencia puede inspeccionarse en el SVG guardado, aunque las vistas previas recortada y cortada se vean iguales.
*Recurso digital original y exportaciones reales de Paper.js. El agujero permanece abierto en los tres archivos de recorridos. Las comprobaciones tratan las líneas centrales; no se realizó una prueba de plóter ni de pluma físico.*
La [guía de unidades de patrón SVG](https://perfectvector.com/es/blog/svg-pattern-units) explica la pintura repetida cuando esa es la salida prevista. Aquí la salida necesaria es geometría abierta explícita.
## 3. Ejecuta el ejemplo completo de Paper.js
Usa un navegador, un editor de texto y la compilación completa de Paper.js 0.12.18 de la [versión oficial](https://github.com/paperjs/paper.js/releases/tag/v0.12.18). Coloca `paper-full.min.js` en una carpeta `library`. Guarda este HTML como `generate.html` y el JavaScript siguiente como `hatch.js` junto a esa carpeta. El emblema original está incluido en el código.
```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.';
```
Abre `generate.html` en el navegador. Lo ejecutamos con Paper.js 0.12.18 en Chromium 155. Cada resultado muestra una vista previa y su código SVG exacto. Copia las tres cadenas SVG completas en `hatch-coarse.svg`, `hatch-dense.svg` y `hatch-angled.svg` y abre después esos archivos guardados por separado.
La llamada crítica es `line.intersect(area, { trace: false, insert: false })`. Paper.js documenta [`trace: false`](https://paperjs.org/reference/pathitem/#intersect-path) como una opción que divide el primer trazado en las intersecciones y conserva sus curvas dentro del área del segundo trazado. Así se mantienen los segmentos abiertos de rayado. El modo predeterminado de trazado de áreas responde a otra pregunta booleana; la [guía de formas rellenas de Paper.js](https://perfectvector.com/es/blog/paperjs-svg-booleans) explica ese flujo.
La función establece `fillColor` en null y da un trazo a cada recorrido. También comprueba que los resultados sean abiertos y de dos puntos antes de exportar. El área cerrada permanece como ayuda de construcción y no se incluye en el grupo de entrega.
## 4. Comprueba juntos espaciado, ángulo y escala física
Las tres exportaciones declaran `width="100mm"`, `height="70mm"` y `viewBox="0 0 200 140"`. Eso hace corresponder una unidad de usuario a 0.5 mm en el SVG. Por tanto, un espaciado de rayado de 10 unidades representa 5 mm; 5 unidades representan 2.5 mm.
Estos espacios de ejemplo deliberadamente amplios facilitan inspeccionar recorridos individuales. No son recomendaciones para una cobertura sólida de tinta. El trazo de pantalla mide una unidad de usuario de ancho, pero su aspecto no mide la marca de un pluma real sobre un material.
El bucle de desplazamiento fija la fase del rayado en medio espacio. Cambiar esa fase puede cambiar qué características del límite encuentra una línea. A 30° positivos, la dirección desciende hacia la derecha en este sistema de coordenadas SVG. El espaciado se mide perpendicularmente a las líneas paralelas, no como su separación vertical en pantalla.
| Archivo guardado | Ángulo | Espaciado | Recorridos abiertos | Longitud de línea central dibujada |
| ------------------ | ------ | ------------------- | ------------------- | ---------------------------------------------- |
| `hatch-coarse.svg` | 0° | 10 unidades / 5 mm | 14 | 1320 unidades / 660 mm |
| `hatch-dense.svg` | 0° | 5 unidades / 2.5 mm | 28 | 2640 unidades / 1320 mm |
| `hatch-angled.svg` | 30° | 10 unidades / 5 mm | 20 | Aproximadamente 1318.564 unidades / 659.282 mm |
Calculamos las intersecciones esperadas entre línea y polígono de forma independiente y comparamos después las coordenadas guardadas con una tolerancia de 0.000002 unidades de usuario. Cada recorrido exportado coincidía con sus extremos esperados. Todos eran abiertos y ningún punto de línea central muestreado atravesó el agujero o el exterior más allá de esa tolerancia. Los tres SVG guardados conservaron la correspondencia declarada de tamaño físico.
Para otra forma, comprueba los recorridos realmente exportados en lugar de suponer que los recuentos de este ejemplo se mantendrán. Las curvas, los espacios muy pequeños, las autointersecciones, los grupos transformados y los documentos SVG importados arbitrarios quedan fuera del alcance de prueba de este ejemplo.
## 5. Separa los saltos entre recorridos de un plan optimizado
El archivo de rayado amplio tiene 14 recorridos abiertos y 13 saltos entre recorridos consecutivos en su orden serializado. Unir esos saltos con el pluma abajo añadiría marcas no deseadas. Tu flujo de dibujo debe manejar las transiciones como se espera antes de dibujar.
El script conserva un orden sencillo de un solo sentido: visita los desplazamientos de rayado en secuencia y sigue cada segmento en la misma dirección. Sumar las distancias rectas desde el final de cada recorrido hasta el inicio del siguiente da aproximadamente 1562.997 unidades de usuario para el archivo amplio. El archivo más denso tiene 27 saltos y una suma de conexiones de aproximadamente 3281.578 unidades.
Esas sumas excluyen el acercamiento inicial y el retorno final. Son consecuencias geométricas de este orden, no desplazamientos de máquina medidos, una estimación de tiempo ni un plan optimizado. Una aplicación de dibujo puede invertir o reordenar los recorridos. Reducir el espaciado a la mitad duplicó la longitud dibujada y el número de recorridos de este ejemplo; no demostró una duplicación universal del tiempo de trabajo.
Reabre el archivo en la aplicación que controlará tu plóter, verifica su tamaño e inspecciona la vista previa de recorridos y el comportamiento de elevación del pluma. Prueba el pluma, el material, el espaciado, la distancia al borde y los ajustes de movimiento en tu propio equipo. No ejecutamos un trabajo de plóter, no generamos código de máquina ni probamos Draw/Attach de Cricut.
## Corrige los fallos geométricos habituales
| Síntoma | Qué inspeccionar y cambiar |
| ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| El rayado atraviesa el agujero previsto | Inspecciona la región rellena. Sustituye una superposición blanca por una abertura real en la geometría compuesta antes de intersecar. |
| La vista previa es correcta, pero quedan líneas completas | Busca una dependencia de recorte o patrón. Inspecciona las coordenadas guardadas de los recorridos en lugar de confiar en la silueta renderizada. |
| Las líneas se convierten en formas cerradas | Confirma que el primer operando sea una línea abierta y que esté presente `trace: false`. El ejemplo rechaza resultados cerrados o de varios segmentos. |
| La tinta sobrepasa un límite | Distingue la línea central de la huella del trazo. Este ejemplo no reduce el área para compensar el radio de la punta; prepara un margen adecuado y prueba la herramienta real. |
| El relleno queda poco denso o la superficie se moja demasiado | Ajusta con una muestra controlada de pluma y material. El espaciado digital por sí solo no demuestra la cobertura ni el comportamiento de secado. |
| El archivo hace saltos inesperados | Inspecciona el orden y las transiciones con pluma levantado en el software de destino. Conserva los recorridos originales antes de aplicar un optimizador y vuelve a comprobar agujeros y límites. |
Si la fuente es solo una silueta ráster plana, el [flujo de clipart a SVG](https://perfectvector.com/es/clipart-to-svg) de PerfectVector puede ayudar a recuperar primero un diseño cerrado. Inspecciona el contorno y cada abertura y genera después recorridos de rayado a partir de la geometría aceptada. Un diseño vectorial existente limpio puede pasar directamente a preparar el rayado.
Vectorizar la silueta y generar recorridos de rayado son pasos separados. El emblema original de este artículo se creó como geometría vectorial; no es una muestra de conversión de PerfectVector.
## Preguntas frecuentes
**¿Un relleno SVG se convierte automáticamente en rayado de pluma?**
No. Un relleno describe el aspecto pintado. Un flujo de dibujo necesita recorridos de rayado u otro método compatible para crear trazos de dibujo a partir de esa área.
**¿Por qué mi vista previa de rayado aún contiene líneas que atraviesan el agujero?**
Un recorte puede ocultar partes de líneas completas sin cortar su geometría guardada. Comprueba las coordenadas guardadas e integra el agujero en el área real antes de producir recorridos explícitos.
**¿Qué espaciado de rayado debo usar?**
Elígelo mediante una prueba de pluma y material a la escala prevista. Este ejemplo digital usa espacios de 5 mm y 2.5 mm para mostrar los recorridos; no demuestra una cobertura sólida ni un ajuste universal de pluma.
**¿Es un solo trazado continuo?**
No. El resultado de rayado amplio contiene 14 recorridos abiertos separados. Su agujero divide cuatro filas y el flujo de dibujo debe manejar los saltos entre recorridos sin añadir marcas no deseadas.
## Fuentes
1. [Intersección de PathItem de Paper.js](https://paperjs.org/reference/pathitem/#intersect-path) — documenta el comportamiento de división de trazados abiertos de trace false.
2. [Patrones SVG](https://www.w3.org/TR/SVG2/pservers.html#Patterns) — define la pintura repetida por separado de la geometría explícita de recorridos.
3. [Máscaras y trazados de recorte CSS](https://www.w3.org/TR/css-masking-1/#ClippingPaths) — explica por qué el recorte cambia el renderizado sin cortar la forma subyacente.
4. [Relleno rayado de GRBL-Plotter](https://grbl-plotter.de/index.php?id=hatch-fill) — muestra la diferencia entre objetos superpuestos y un agujero dentro de un trazado.
5. [Versión de Paper.js 0.12.18](https://github.com/paperjs/paper.js/releases/tag/v0.12.18) — identifica la versión de biblioteca usada en el ejemplo ejecutable.
Si una silueta solo ráster necesita límites editables, [prepara un SVG candidato de clipart](https://perfectvector.com/es/clipart-to-svg), inspecciona sus agujeros y genera y verifica los recorridos de rayado por separado antes de probar el trabajo físico.
## Explore
- [Read the HTML article](https://perfectvector.com/es/blog/hatch-fill-svg-pen-paths)
- [Líneas SVG de hendido y corte: lee la geometría](https://perfectvector.com/es/blog/svg-score-lines-vs-cut-lines.md)
- [Plantillas para grabar vidrio: elige qué retirar](https://perfectvector.com/es/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)