Validación HTML: Valor incorrecto "none" para el atributo "text-anchor" en el elemento "g".

Acerca de este problema HTML

Este error de validación de W3C tiene dos problemas distintos combinados en un mensaje. Primero, el valor "none" no es un valor reconocido para el atributo text-anchor — los únicos valores aceptados son start, middle, y end. Segundo, el elemento <g> es un contenedor genérico usado para agrupar formas SVG y no soporta el atributo text-anchor directamente.

El atributo text-anchor controla cómo se alinea el texto en relación a su punto de anclaje (la coordenada x). Un valor de start alinea el inicio del texto al ancla, middle centra el texto en el ancla, y end alinea el final del texto al ancla. No existe un valor "none" porque el texto siempre necesita una alineación — start es el valor por defecto si se omite el atributo.

Por qué esto es un problema

Marcado inválido: Usar un valor no reconocido como "none" significa que los navegadores deben adivinar el comportamiento previsto, lo que puede llevar a un renderizado inconsistente entre diferentes entornos.
Elemento incorrecto: El elemento <g> no renderiza texto directamente, por lo que text-anchor no tiene un efecto significativo en él. Aunque la herencia CSS podría hacer que los elementos de texto hijos tomen estilos de un <g> padre, el atributo de presentación text-anchor solo es válido en elementos que realmente renderizan contenido de texto.
Cumplimiento de estándares: La especificación SVG define explícitamente qué elementos aceptan text-anchor y qué valores están permitidos. Violar esto produce errores de validación y puede causar problemas con herramientas de procesamiento SVG.

Cómo solucionarlo

Elimina el atributo del elemento <g> y aplícalo al elemento de texto apropiado dentro del grupo.
Reemplaza "none" con un valor válido: start, middle, o end. Si quieres el comportamiento por defecto (alineado a la izquierda para texto LTR), simplemente omite el atributo completamente, ya que start es el valor por defecto.
Si necesitas establecer text-anchor para múltiples elementos de texto dentro de un grupo, usa CSS en lugar del atributo de presentación.

Ejemplos

❌ Inválido: `"none"` en un elemento `<g>`

<svg width="200" height="200">
  <g text-anchor="none">
    <text x="100" y="100">Hola</text>
  </g>
</svg>

✅ Corregido: valor válido en el elemento `<text>`

<svg width="200" height="200">
  <text x="100" y="100" text-anchor="middle">Hola</text>
</svg>

✅ Corregido: atributo eliminado completamente (usa el `start` por defecto)

<svg width="200" height="200">
  <g>
    <text x="100" y="100">Hola</text>
  </g>
</svg>

✅ Usando CSS para dar estilo al texto dentro de un grupo

Si quieres que todos los elementos de texto dentro de un grupo compartan la misma alineación, aplica el estilo vía CSS en lugar de un atributo de presentación en <g>:

<svg width="200" height="200">
  <style>
    .centered-text text {
      text-anchor: middle;
    }
  </style>
  <g class="centered-text">
    <text x="100" y="50">Primera línea</text>
    <text x="100" y="100">Segunda línea</text>
  </g>
</svg>

✅ Uso válido en otros elementos relacionados con texto

El atributo text-anchor también puede aplicarse a <tspan> y <textPath>:

<svg width="300" height="100">
  <text x="150" y="50" text-anchor="start">
    Alineado al inicio
    <tspan x="150" dy="30" text-anchor="end">Span alineado al final</tspan>
  </text>
</svg>