Skip to main content
Validación HTML

Valor incorrecto “none” para el atributo “font-weight” en el elemento “g”.

Acerca de este problema HTML

El atributo de presentación SVG font-weight controla la negrita o ligereza de los glifos utilizados para renderizar texto. Según la especificación SVG, este atributo solo es válido en elementos de contenido de texto: <text>, <tspan>, <textPath>, y el obsoleto <tref>. Aunque el elemento <g> es un contenedor de propósito general para agrupar elementos SVG, no acepta font-weight como atributo directo en un marcado válido.

El valor "none" agrava el problema porque no es un valor reconocido para font-weight en ningún contexto. Los valores permitidos son:

  • normal (equivalente a 400)
  • bold (equivalente a 700)
  • bolder (relativo al padre)
  • lighter (relativo al padre)
  • Un valor numérico: 100, 200, 300, 400, 500, 600, 700, 800, o 900

Esto es importante para el cumplimiento de estándares y el renderizado predecible entre navegadores. Aunque algunos navegadores pueden ignorar silenciosamente atributos o valores inválidos, depender de ese comportamiento conduce a código frágil. Usar atributos válidos en los elementos correctos asegura resultados consistentes y evita errores de validación.

Si necesitas aplicar un font-weight a múltiples elementos de texto dentro de un <g>, usa CSS en su lugar. Puedes aplicar un estilo a través del atributo style en el <g>, una class, o un bloque <style> inline. El CSS font-weight es heredado, por lo que los elementos de texto hijos lo adoptarán.

Ejemplos

Inválido: font-weight="none" en un elemento <g>

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <g font-weight="none">
    <text y="20">Hello</text>
  </g>
</svg>

Esto activa el error de validación porque <g> no acepta el atributo font-weight directamente, y "none" no es un valor válido.

Corregido: font-weight en el elemento <text> con un valor válido

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text y="20" font-weight="bold">Hello</text>
  </g>
</svg>

Corregido: usando un peso numérico en <text>

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-weight="700">Bold text</text>
  <text x="100" y="20" font-weight="400">Normal text</text>
</svg>

Corregido: aplicando font-weight a un <g> vía CSS

Si quieres que todo el texto dentro de un <g> comparta el mismo peso, usa el atributo style o una clase CSS. El font-weight basado en CSS en un <g> es válido porque la herencia CSS se aplica a todo el contenido de texto descendiente.

<svg viewBox="0 0 300 30" xmlns="http://www.w3.org/2000/svg">
  <g style="font-weight: bold">
    <text y="20">This is bold</text>
    <text x="150" y="20">Also bold</text>
  </g>
</svg>

Corregido: usando un bloque <style> inline

<svg viewBox="0 0 300 30" xmlns="http://www.w3.org/2000/svg">
  <style>
    .heavy { font-weight: 900; }
  </style>
  <g class="heavy">
    <text y="20">Heavy text</text>
    <text x="150" y="20">Also heavy</text>
  </g>
</svg>

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.