Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

g container element

  • Element g to group elements and to apply various attributes to all of them via inheritance.

Circles with g

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <g fill="white" stroke="blue" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="80" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>

  <g fill="white" stroke="red" stroke-width="5" transform="translate(0, 80)">
    <circle cx="40" cy="40" r="25" />
    <circle cx="80" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>