v147 · SVG · demo

Inline Path Text

The old approach required a hidden <path> in <defs> plus an ID cross-reference. The new path attribute lets you write the curve data right on <textPath>.

<defs> + href

SVG 1.1

<defs>
  <path id="wavePath1"
    d="M 10,80 C 60,20 …"/>
</defs>
<text>
  <textPath href="#wavePath1">
    Text on a wave path
  </textPath>
</text>

inline path=

SVG 2 · Chrome 147

<text>
  <textPath
    path="M 10,80 C 60,20 …"
    startOffset="5%">
    Text on a wave path
  </textPath>
</text>

What changed: no <defs> block, no ID, no href cross-reference. The path geometry lives exactly where it's used — ideal for server-rendered or dynamically generated SVG.

// Dynamically create curved text without injecting into <defs>
const svg = document.querySelector('svg');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
const tp   = document.createElementNS('http://www.w3.org/2000/svg', 'textPath');

// New: set path data directly — no ID juggling required
tp.setAttribute('path', 'M 10,80 C 60,20 120,110 180,50 S 270,20 290,60');
tp.setAttribute('startOffset', '5%');
tp.textContent = 'Dynamically generated curved text';

text.appendChild(tp);
svg.appendChild(text);

scenario focus

Select a scenario to focus its rendered example and summary.

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

scenario focus

implementation reference