Verificação HTML: Valor inválido "none" para o atributo "text-anchor" no elemento "g".

Sobre este problema HTML

Este erro de validação W3C tem dois problemas distintos combinados numa única mensagem. Primeiro, o valor "none" não é um valor reconhecido para o atributo text-anchor — os únicos valores aceites são start, middle, e end. Segundo, o elemento <g> é um contentor genérico usado para agrupar formas SVG e não suporta o atributo text-anchor diretamente.

O atributo text-anchor controla como o texto é alinhado relativamente ao seu ponto de ancoragem (a coordenada x). Um valor de start alinha o início do texto à âncora, middle centra o texto na âncora, e end alinha o final do texto à âncora. Não existe um valor "none" porque o texto sempre precisa de um alinhamento — start é o padrão se o atributo for omitido.

Porque isto é um problema

Marcação inválida: Usar um valor não reconhecido como "none" significa que os navegadores têm de adivinhar o comportamento pretendido, o que pode levar a renderização inconsistente em diferentes ambientes.
Elemento errado: O elemento <g> não renderiza texto diretamente, portanto text-anchor não tem qualquer efeito significativo nele. Embora a herança CSS possa fazer com que elementos de texto filhos herdem estilos de um elemento <g> pai, o atributo de apresentação text-anchor apenas é válido em elementos que realmente renderizam conteúdo de texto.
Conformidade com as normas: A especificação SVG define explicitamente quais elementos aceitam text-anchor e quais valores são permitidos. Violar isto produz erros de validação e pode causar problemas com ferramentas de processamento SVG.

Como corrigir

Remova o atributo do elemento <g> e aplique-o ao elemento de texto apropriado dentro do grupo.
Substitua "none" por um valor válido: start, middle, ou end. Se quiser o comportamento padrão (alinhado à esquerda para texto LTR), simplesmente omita o atributo completamente, pois start é o padrão.
Se precisar de definir text-anchor para múltiplos elementos de texto dentro de um grupo, use CSS em vez do atributo de apresentação.

Exemplos

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

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

✅ Corrigido: valor válido no elemento `<text>`

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

✅ Corrigido: atributo removido completamente (usa o padrão `start`)

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

✅ Usando CSS para estilizar texto dentro de um grupo

Se quiser que todos os elementos de texto dentro de um grupo partilhem o mesmo alinhamento, aplique o estilo via CSS em vez de um atributo de apresentação no <g>:

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

✅ Uso válido noutros elementos relacionados com texto

O atributo text-anchor também pode ser aplicado a <tspan> e <textPath>:

<svg width="300" height="100">
  <text x="150" y="50" text-anchor="start">
    Alinhado ao início
    <tspan x="150" dy="30" text-anchor="end">Span alinhado ao final</tspan>
  </text>
</svg>