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 a400) -
bold(equivalente a700) -
bolder(relativo al padre) -
lighter(relativo al padre) -
Un valor numérico:
100,200,300,400,500,600,700,800, o900
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.