Step 1:
Let us begin with the first example from the lesson on clip-paths, only
expand its size a bit (to prepare for putting patterns inside it):
<clipPath id="CP"> <ellipse cx="36.5%" cy="32%" rx="12%" ry="18%"/> </clipPath> <image y="0" x="10%" width="55%" height="65%" xlink:href='p17.jpg' clip-path="url(#CP)"/> | |
Step 2:
Now let's make another ellipse (placing the code just below that of the
<image> applying our pattern from above to the new ellipse:
<pattern id="OvalPattern" patternUnits="userSpaceOnUse" width="100" height="70" > <g id="ovals3" transform="scale(4)" > <ellipse cx="19" cy="9" rx="5" ry="2" fill="#835"/> <ellipse cx="11" cy="3" rx="5" ry="2" fill="#358"/> <ellipse cx="6" cy="13" rx="5" ry="2" fill="#583"/> </g> </pattern>
<clipPath id="CP"> <ellipse cx="36.5%" cy="32%" rx="12%" ry="18%"/> </clipPath> <image y="0" x="10%" width="55%" height="65%" xlink:href='p17.jpg' clip-path="url(#CP)"/> <ellipse cx="36.5%" cy="32%" rx="12%" ry="18%" fill="url(#OvalPattern)"/> | |
Step 3:
What we might be interested in doing is to take the ellipse filled with
the pattern and move it inside the <clipPath) as follows:
<clipPath id="CP"> <ellipse cx="36.5%" cy="32%" rx="12%" ry="18%" fill="url(#OvalPattern)"/> </clipPath> However,
a quick check shows that doesn't work! The reason is that a clip-path
cannot contain such complex content. The things inside a clip-path are
really just the outlines of the shapes. The fills are ignored! | |
Step
4: So what we do instead is to use a mask instead of a clip-path. Doing
that, should result in a series of holes through which we can see the
underlying face, but you'll note that the face will appear quite dim.
That's because of the way a mask works. We will need to change all the
colors from dark blues, purples and greens to white! I also add another
ellipse behind the other, so that a stroke will be visible around the
ellipse. Once that is done, the placement and size of the ellipses is
manipulated a bit to make the result a bit more interesting.
<pattern id="OvalPattern" patternUnits="userSpaceOnUse" width="100" height="70" > <g id="ovals3" transform="scale(4)" fill="white"> <ellipse cx="20" cy="10" rx="5" ry="6" /> <ellipse cx="10" cy="4" rx="6" ry="4" /> <ellipse cx="6" cy="12" rx="5" ry="4" /> </g> </pattern> <ellipse cx="36.5%" cy="32%" rx="12%" ry="18%" fill="none" stroke="#d88" stroke-width="5"/> <mask id="CP"> <ellipse cx="36.5%" cy="32%" rx="12%" ry="18%" fill="url(#OvalPattern)"/> </mask> <image y="0" x="10%" width="55%" height="65%" xlink:href='p17.jpg' mask="url(#CP)"/> | |