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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-none-for-attribute-text-anchor-on-element-g
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

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

### ✅ Fixed: attribute removed entirely (uses default `start`)

```html
<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>`:

```html
<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>`:

```html
<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>
```