Propiedad CSS stroke-width
Cómo usar la propiedad CSS stroke-width para establecer el grosor del trazo. Descripción de la propiedad y ejemplos de sus valores.
La propiedad CSS stroke-width establece el grosor del contorno (el "trazo") dibujado alrededor de una figura SVG o un texto. El trazo es la línea pintada que sigue el trazado de la figura; stroke-width controla qué tan gruesa es esa línea.
Esta página cubre la sintaxis, los valores aceptados (longitudes y porcentajes), cómo stroke-width interactúa con los atributos de presentación de SVG, y los aspectos a tener en cuenta respecto a las unidades y el escalado con viewBox.
Por qué usar stroke-width
En SVG, el contorno de una figura y su interior se pintan por separado: la propiedad stroke pinta el contorno y fill pinta el interior. Un trazo solo es visible cuando tiene un ancho distinto de cero, por lo que stroke-width es lo que hace que un contorno aparezca realmente. Úsala para hacer bordes más gruesos o más delgados, para dibujar cuadrículas de línea fina, o para crear iconos y texto con contornos en negrita.
stroke-width vs. el atributo SVG
Puedes establecer el ancho del trazo de dos formas: como atributo de presentación SVG en el marcado (stroke-width="3") o como propiedad CSS. Cuando ambas están presentes, CSS gana — una regla CSS (o un style en línea) tiene precedencia sobre el atributo de presentación. Esta es la razón habitual por la que un valor establecido en el marcado SVG parece "ignorarse": una hoja de estilos lo está sobreescribiendo.
<!-- The CSS stroke-width: 1px wins over the attribute stroke-width="5". -->
<circle cx="5" cy="5" r="3" stroke-width="5" style="stroke-width: 1px;" />El atributo stroke-width es un atributo de presentación y puede aplicarse a cualquier elemento, pero solo tendrá efecto en los siguientes elementos: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> y <tspan>.
Se requieren unidades como px o em, excepto cuando el valor es 0.
| Valor inicial | 1 |
|---|---|
| Se aplica a | Elementos de forma y contenido de texto. |
| Se hereda | Sí. |
| Animable | Sí. |
| Versión | Especificación SVG 1.1 |
| Sintaxis DOM | Object.strokeWidth = "0.5"; |
Sintaxis
stroke-width: length | percentage | initial | inherit;El ancho está centrado en el trazado: la mitad se pinta dentro del borde de la figura y la otra mitad fuera. Por tanto, un stroke-width de 4 en un círculo de radio 3 añade 2 unidades más allá del radio y superpone 2 unidades hacia el interior.
Ejemplo de la propiedad stroke-width:
Ejemplo de código CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 1px;" />
</svg>
</body>
</html>Resultado
Ejemplo de la propiedad stroke-width con el valor "length":
Otro ejemplo de código CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 3px;" />
</svg>
</body>
</html>Ejemplo de la propiedad stroke-width con el valor "%":
Un porcentaje se resuelve respecto a la diagonal del SVG — concretamente la diagonal del viewport (sqrt(width² + height²) / sqrt(2)), no respecto al tamaño propio de la figura. Esto hace que los anchos en porcentaje sean útiles cuando se desea que el trazo escale con el dibujo.
Ejemplo de valor porcentual de CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 2%;" />
</svg>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| length | Especifica el ancho del trazo. |
| percentage | Especifica el ancho del trazo en %. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Notas y aspectos a tener en cuenta
- Un ancho cero oculta el trazo.
stroke-width: 0no dibuja nada, incluso si hay un colorstrokedefinido. - Las unidades son obligatorias para valores CSS distintos de cero. Dentro de un
styleo una hoja de estilos, usa2px,0.5em, etc. La forma de número sin unidad (stroke-width="3") solo es válida como atributo SVG, donde el número se interpreta en unidades del espacio de usuario. - El trazo se distribuye a ambos lados del trazado. Dado que la mitad del ancho se sitúa fuera del borde de la figura, un trazo grueso puede sobresalir del
viewBoxy quedar recortado. Añade relleno alviewBoxsi el contorno aparece cortado. - Se escala con el
viewBox. Unstroke-widthexpresado en unidades de usuario crece y se reduce a medida que el SVG se escala para ajustarse a su contenedor. Para mantener un grosor constante en pantalla independientemente del escalado, añade el atributo SVGvector-effect="non-scaling-stroke"al elemento.
Propiedades relacionadas
stroke— el color (pintura) del contorno.stroke-linecap— la forma de los extremos de los trazados abiertos.stroke-dasharray— convierte el trazo en una línea discontinua.stroke-dashoffset— desplaza el punto de inicio del patrón de guiones.fill— el color del interior de una figura.