CSS: “stroke-width”: no se permiten valores negativos como “-X”.

La propiedad stroke-width controla el grosor del contorno (trazo) dibujado alrededor de formas y texto, usada principalmente en SVG pero también aplicable a elementos HTML vía CSS. Según tanto la especificación SVG como el estándar CSS, stroke-width acepta solo valores no negativos — es decir, cero o cualquier número positivo, opcionalmente con una unidad de longitud CSS como px, em, o rem. Un número sin unidad también es válido y se interpreta en las unidades de usuario del sistema de coordenadas actual.

Los valores negativos son lógicamente sin sentido para el ancho del trazo porque no puedes dibujar un contorno con grosor negativo. Los navegadores típicamente ignorarán o descartarán la declaración inválida, lo que significa que el trazo puede renderizarse con un ancho predeterminado inesperado o no renderizarse en absoluto. Más allá de problemas de renderizado, usar valores CSS inválidos causa errores de validación W3C, que pueden indicar problemas de calidad más amplios en tu código y pueden llevar a comportamiento impredecible entre diferentes navegadores.

Una causa común de este error es la generación dinámica de valores — por ejemplo, una expresión CSS calc() o una variable de preprocesador que inadvertidamente produce un resultado negativo. Si el ancho de tu trazo es calculado, asegúrate de limitar el valor para que nunca baje de 0.

Cómo solucionarlo

1. Reemplaza valores negativos con 0 o un número positivo. Si pretendías que no hubiera trazo visible, usa 0. Si querías un trazo visible, usa el grosor positivo apropiado.
2. Protege valores calculados. Si el valor viene de una expresión calc() o propiedad personalizada CSS, usa max() para asegurar que el resultado nunca sea negativo — por ejemplo, stroke-width: max(0px, calc(10px - 15px)).
3. Verifica estilos en línea y hojas de estilo. El error puede aparecer tanto en atributos style en línea como en CSS externo/interno. Busca en tu código base cualquier declaración stroke-width con un número negativo.

Ejemplos

❌ Inválido: stroke-width negativo en un elemento HTML

<p style="stroke-width: -1">Algún contenido</p>

Esto dispara el error del validador porque -1 no es un valor permitido.

✅ Solucionado: stroke-width no negativo

<p style="stroke-width: 0">Algún contenido</p>

Usar 0 elimina el trazo completamente y es válido.

❌ Inválido: stroke-width negativo en un elemento SVG

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="-3" fill="none"/>
</svg>

✅ Solucionado: stroke-width positivo en un elemento SVG

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none"/>
</svg>

✅ Usando max() para limitar un valor calculado

<div style="stroke-width: max(0px, calc(5px - 10px))">Algún contenido</div>

Aquí, calc(5px - 10px) produciría -5px, pero max(0px, ...) asegura que el valor final sea 0px, manteniendo el CSS válido.

Más información:

MDN Reference

stroke-width - CSS: Cascading Style Sheets | MDN

→

MDN Reference

stroke-width - SVG: Scalable Vector Graphics | MDN

→

W3C Reference

SVG 2: The ‘stroke-width’ presentation attribute

→