Text: anchors, baselines, lines and a long label
Only text-independent facts are printed: whether a label fits, and where an anchor sits. Pixel widths depend on the computer's fonts.
SVG shapes are coloured with fill (inside) and stroke (outline), set either as attributes or in CSS, where CSS wins. Text is placed by its baseline and anchor, never wraps, and overflows silently when a label is too long.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a <text> label that reads Sat centred under a bar whose left edge is at x = 280 and width 40, 14 units below a baseline of y = 180. Write the tag.
A rectangle uses fill="currentColor". Write the CSS so that it is dark in light mode and light in dark mode, using the class dark on body.
Explain it without notes
Which wins, a fill attribute or a CSS rule? What beats a CSS class?
Where is the baseline of an SVG text, and what does text-anchor="end" do?
How wide is a stroke on a rectangle, relative to its edge?
What happens when a label is longer than its slot, and how do you handle it?
Preview
Console
Nothing logged yet.Expected console output
text-anchor left edge is at x = 150
text-anchor centre is at x = 150
text-anchor right edge is at x = 150
Long label fits in the slot: false
Shortened label fits in the slot: true
Full text kept in <title>: Harbour Gate Ferry Terminal (west side)
Real text has 5 characters; the path has 0