Propiedad CSS stroke
Cómo usar la propiedad CSS stroke para pintar el contorno de un elemento SVG. Conoce los valores disponibles con ejemplos prácticos.
La propiedad CSS stroke pinta el contorno (la línea) de una forma SVG o de un fragmento de texto. Mientras que fill colorea el interior de una forma, stroke colorea su borde — juntos controlan cómo se dibuja cada trazado, círculo, rectángulo y elemento de texto SVG.
Esta página explica qué hace stroke, los valores que acepta, cómo interactúa con las propiedades de trazo relacionadas (anchura, patrón de guiones, extremos de línea) y los errores comunes que suelen surgir.
¿Cuándo debo usarlo?
stroke solo afecta al contenido SVG — no tiene ningún efecto en elementos HTML ordinarios como <div> o <p>. Úsalo cuando estés:
- Dibujando iconos, gráficos o diagramas en línea con
<svg>. - Animando una línea que "se dibuja a sí misma" (combina
strokeconstroke-dasharrayystroke-dashoffset). - Delineando texto SVG sin rellenarlo.
Puedes encontrar colores web con nombre en la sección de colores HTML.
Propiedad CSS vs. atributo de presentación
stroke es especial: puedes definirlo tanto como propiedad CSS o como atributo de presentación SVG escrito directamente en el elemento. Estas dos líneas producen el mismo resultado:
<!-- presentation attribute -->
<path stroke="#1c87c9" d="M5 20 l215 0" />
<!-- CSS, via a style block or stylesheet -->
<path style="stroke: #1c87c9;" d="M5 20 l215 0" />Cuando ambos están presentes, gana CSS: un style en línea (o cualquier regla de hoja de estilos) anula el atributo de presentación. Esto permite definir un color predeterminado en el marcado y sobreescribirlo desde CSS — por ejemplo, al pasar el cursor.
La propiedad stroke puede usarse tanto como propiedad CSS como atributo de presentación. Se puede aplicar a cualquier elemento, pero solo tiene efecto en los siguientes: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> y <tspan>.
| Valor inicial | none |
|---|---|
| Se aplica a | Formas y elementos de contenido de texto. |
| Heredado | Sí. |
| Animable | No. |
| Versión | Especificación SVG 1.1 |
| Sintaxis DOM | Object.stroke = "#1c87c9"; |
Sintaxis
Sintaxis CSS de stroke
stroke: color | url | none | context-fill | context-stroke | initial | inherit;Ejemplo de la propiedad stroke:
Ejemplo de código CSS stroke
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke property example</h2>
<svg height="100" width="500">
<g fill="none">
<path stroke="#8ebf42" d="M5 20 l215 0" />
<path stroke="#1c87c9" d="M5 40 l215 0" />
<path stroke="#666666" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>Resultado
Ejemplo con formas y CSS
No es necesario escribir stroke como atributo — aquí se define desde un bloque <style> y se aplica a varias formas a la vez. Observa fill: none para que solo se muestre el contorno:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.outline {
fill: none;
stroke: #1c87c9;
stroke-width: 4px;
}
circle.outline {
stroke: #8ebf42;
}
</style>
</head>
<body>
<h2>Stroke from a CSS rule</h2>
<svg height="120" width="300">
<rect class="outline" x="10" y="10" width="100" height="100" />
<circle class="outline" cx="220" cy="60" r="50" />
</svg>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| none | No se aplica ningún color de relleno. |
| color | Establece un color sólido. Se pueden usar nombres de colores, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla(). |
| url | Referencia URL a un elemento de servidor de pintura que define un servidor de pintura. |
| context-fill | Utiliza el valor de fill del elemento de contexto. |
| context-stroke | Utiliza el valor de stroke del elemento de contexto. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
El valor inicial es none, lo que significa que una forma sin stroke se dibuja sin ningún contorno — incluso si stroke-width está definido.
Propiedades de trazo relacionadas
stroke solo define el color del contorno. Para controlar cómo se ve ese contorno, combínalo con:
stroke-width— el grosor de la línea.stroke-dasharray— un patrón de guiones/espacios en lugar de una línea sólida.stroke-dashoffset— dónde comienza el patrón de guiones (clave para las animaciones de trazado).stroke-linecap— la forma de los extremos de la línea.
Errores comunes
- No aparece nada. Si
stroke-widthes0(el valor predeterminado), el contorno es invisible sin importar el color elegido. Define siempre una anchura. - La forma es sólida. Si solo quieres el contorno, define
fill: none— de lo contrario, el interior se pinta de negro de forma predeterminada. - No funciona en un
<div>.strokesolo tiene efecto en elementos gráficos y de texto SVG:<altGlyph>,<circle>,<ellipse>,<line>,<path>,<polygon>,<polyline>,<rect>,<text>,<textPath>,<tref>y<tspan>.