Groups, inheritance and the order of transforms
Both groups contain the same rectangle and dot. Only the order of translate and rotate differs, and the dot ends up in two different places.
A <g> groups shapes so they move and style together. <defs>, <use> and <symbol> define a drawing once and reuse it. Gradients and patterns fill shapes, and clip paths and masks cut them, while the hidden parts stay in the page.
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.
Write a <g> that moves three circles 50 across and 40 down, and makes all of them #2a9d8f except one that is #e76f51. What are the page coordinates of a circle with cx="10" cy="10" inside it?
Write a <defs> with one <symbol id="dot" viewBox="0 0 10 10"> holding a circle, and two <use>s that draw it at 20 by 20 and 40 by 40.
Explain it without notes
What do the children of a <g> inherit, and what does a transform on the group do to them?
Why does translate(300 20) rotate(30) put a shape in a different place from rotate(30) translate(300 20)?
What is the difference between <symbol> and <g>, and what happens if a <use> of a symbol has no width and height?
A clip path hides 30 of 40 bars. How many bars are still in the page, and why does that matter?
Preview
Console
Nothing logged yet.Expected console output
Bar 1 fill (inherited from the group): rgb(42, 157, 143)
Bar 2 fill (its own): rgb(231, 111, 81)
Bar 1 starts at x = 0, but lands on the page at x = 20
first group: [0.87 0.50 -0.50 0.87 300.00 20.00], origin lands at (300.0, 20.0)
second group: [0.87 0.50 -0.50 0.87 249.81 167.32], origin lands at (249.8, 167.3)