To let content appear only through a specific shape, you'll need to take advantage of clipping paths. In Hour 7, you learned to fill a container with a pattern. Clipping paths are similar in concept, minus the repeating tiles.
Clipping paths require two components:
A clipPath element
A clip-path style property
The clipPath element contains the graphics that will serve as the content for the “keyhole” shape. This graphic content resides between <clipPath> and </clipPath> tags. Naming your clipPath element will allow it to be applied to other objects.
The style declaration used to apply a clipping path consists of clip-path:url(#ClipID), where “ClipID” is most often the name of the clipping path's id value. Applying this style declaration ...