A gradient/pattern fill or any stroke on <text> outlines each glyph to a vector path and paints it with the same brush/pen machinery shapes use; a <textPath> lays glyphs along a referenced <path>. Plain solid text keeps the fast, selectable text-show path. (docs/supported-svg-features.md)
linear-gradient fill | radial-gradient fill | tiled pattern fill |
fill + contrasting stroke | outline only (fill:none) | gradient fill + stroke |
Each glyph is placed at its own distance along the path and rotated to the tangent there; text past the path end is dropped. startOffset and text-anchor shift the run's start along the path.
along a wavy curve, gradient | around a circle | centered on the path (text-anchor) |