Bad value “none” for attribute “text-anchor” on element “g”.

This W3C validation error has two distinct problems combined into one message. First, the value "none" is not a recognized value for the text-anchor attribute — the only accepted values are start, middle, and end. Second, the <g> element is a generic container used to group SVG shapes together and does not support the text-anchor attribute directly.

The text-anchor attribute controls how text is aligned relative to its anchor point (the x coordinate). A value of start aligns the beginning of the text to the anchor, middle centers the text on the anchor, and end aligns the end of the text to the anchor. There is no "none" value because text always needs an alignment — start is the default if the attribute is omitted.

Why this is a problem

• Invalid markup: Using an unrecognized value like "none" means browsers must guess the intended behavior, which can lead to inconsistent rendering across different environments.
• Wrong element: The <g> element does not directly render text, so text-anchor has no meaningful effect on it. While CSS inheritance might cause child text elements to pick up styles from a parent <g>, the text-anchor presentation attribute is only valid on elements that actually render text content.
• Standards compliance: The SVG specification explicitly defines which elements accept text-anchor and which values are allowed. Violating this produces validation errors and may cause issues with SVG processing tools.

How to fix it

1. Remove the attribute from the <g> element and apply it to the appropriate text element inside the group.
2. Replace "none" with a valid value: start, middle, or end. If you want the default behavior (left-aligned for LTR text), simply omit the attribute entirely, as start is the default.
3. If you need to set text-anchor for multiple text elements inside a group, use CSS instead of the presentation attribute.

Examples

❌ Invalid: "none" on a <g> element

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

✅ Fixed: valid value on the <text> element

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

✅ Fixed: attribute removed entirely (uses default start)

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

✅ Using CSS to style text inside a group

If you want all text elements within a group to share the same alignment, apply the style via CSS rather than a presentation attribute on <g>:

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

✅ Valid use on other text-related elements

The text-anchor attribute can also be applied to <tspan> and <textPath>:

<svg width="300" height="100">
  <text x="150" y="50" text-anchor="start">
    Start-aligned
    <tspan x="150" dy="30" text-anchor="end">End-aligned span</tspan>
  </text>
</svg>

Learn more:

MDN Reference

MDN - text-anchor

→

MDN Reference

MDN - SVG <text>

→

MDN Reference

MDN - SVG <textPath>

→

MDN Reference

MDN - SVG <tref> (deprecated)

→

MDN Reference

MDN - SVG <tspan>

→

MDN Reference

MDN - SVG <g>

→