Propiedad stroke-width de CSS
La propiedad CSS stroke-width especifica el ancho del trazo en el elemento.
CSS stroke-width anula el atributo de presentación de SVG. Por ejemplo, una regla CSS tendrá prioridad sobre stroke-width="3" en el marcado. Los estilos en línea también anulan los atributos de presentación.
INFO
El 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>.
INFO
Se requieren unidades como px o em, excepto cuando el valor es 0.
| Valor inicial | 1 |
|---|---|
| Se aplica a | Formas y elementos de contenido de texto. |
| Heredable | Sí. |
| Animable | Sí. |
| Versión | Especificación SVG 1.1 |
| Sintaxis DOM | Object.strokeWidth = "0.5"; |
Sintaxis
Sintaxis de CSS stroke-width
stroke-width: length | percentage | initial | inherit;Ejemplo de la propiedad stroke-width:
Ejemplo de código 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: 1px;" />
</svg>
</body>
</html>Resultado
Ejemplo de la propiedad stroke-width con el valor "length":
Otro ejemplo de código 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: 3px;" />
</svg>
</body>
</html>Ejemplo de la propiedad stroke-width con el valor "%":
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. |
Práctica
¿Qué hace la propiedad CSS 'stroke-width'?