<svg viewbox="0 0 600 200"> <text x="100" y="50%" fill="#f00" font-size="90">SVG TEXT</text> </svg>
<svg viewbox="0 0 600 200"> <text x="100" y="50%" style="font-size:90px; fill:red;">SVG TEXT</text> </svg>
<svg viewbox="0 0 600 200"> <text x="100" y="50%" style="font-size:90px; fill:none; stroke:red;">SVG TEXT</text> </svg>
TSPAN
<svg viewbox="0 0 600 200"> <text y="50%" font-size="60"> <tspan>ONE</tspan> <tspan fill="red">TWO</tspan> <tspan fill="blue">THREE</tspan> </text> </svg>
DX/DY
<svg viewbox="0 0 400 100"> <text y="50%" font-size="30"> <tspan>One</tspan> <tspan dx="100">Two</tspan> <tspan>Three</tspan> </text> </svg>
<svg viewbox="0 0 300 200"> <text y="50" font-size="30"> <tspan>One</tspan> <tspan dy="100">Two</tspan> <tspan>Three</tspan> </text> </svg>
TEXT-ANCHOR
<svg viewbox="0 0 600 400"> <line x1="50%" x2="50%" y1="0" y2="100%" stroke="#000" /> <text y="100" style="fill:#f00; font-size:30px"> <tspan x="50%">Default</tspan> <tspan x="50%" text-anchor="middle" dy="100">Middle</tspan> <tspan x="50%" text-anchor="end" dy="100">End</tspan> </text> </svg>
ALIGNMENT-BASELINE
MDN Docs
<svg viewbox="0 0 600 300"> <line y1="50%" y2="50%" x1="0" x2="100%" stroke="#000" /> <text y="50%" style="fill:#f00; font-size:40px" text-anchor="middle"> <tspan x="20%">Default</tspan> <tspan x="50%" alignment-baseline="middle">Middle</tspan> <tspan x="80%" alignment-baseline="hanging">Hanging</tspan> </text> </svg>
BASELINE-SHIFT
MDN Docs
<svg viewbox="0 0 300 100"> <line y1="50%" y2="50%" x1="0" x2="100%" stroke="#000" /> <text y="50%" font-size="30"> <tspan>A</tspan> <tspan baseline-shift="sub">B</tspan> <tspan baseline-shift="super">C</tspan> <tspan baseline-shift="-10">D</tspan> <tspan baseline-shift="50%">E</tspan> </text> </svg>
SPACING
<svg viewbox="0 0 1000 200"> <text y="50%" style="font-size:60px;">The Quick Brown Fox</text> </svg>
<svg viewbox="0 0 1000 200"> <text y="50%" style="font-size:60px; word-spacing:1em;">The Quick Brown Fox</text> </svg>
<svg viewbox="0 0 1000 200"> <text y="50%" style="font-size:60px; letter-spacing:10;">The Quick Brown Fox</text> </svg>
<svg viewbox="0 0 1000 200"> <text y="50%" font-size="60" textLength="1000">The Quick Brown Fox</text> </svg>
DECORATION
<svg viewbox="0 0 800 200"> <text y="50%" style="font-size:60px; text-decoration:underline;">The Quick Brown Fox</text> </svg>
<svg viewbox="0 0 800 200"> <text y="50%" style="font-size:60px; text-decoration:overline;">The Quick Brown Fox</text> </svg>
<svg viewbox="0 0 800 200"> <text y="50%" style="font-size:60px; text-decoration:line-through;">The Quick Brown Fox</text> </svg>
Direction
MDN-writing-mode
MDN-text-orientation
<svg viewbox="0 0 50 50"> <text x="50%" font-size="10" writing-mode="tb">vertical</text> </svg>
<svg viewbox="0 0 100 100"> <text x="50%" font-size="10" writing-mode="tb" style="text-orientation:upright">upright</text> </svg>