CODEWITHSUNDEEP
htmlcsssvg
Katie
Katie

Reputation: 751

Create a mask over a shape using text

I have an svg shape and I have some text. I essentially want the shape to have the outline of the text within the shape.

Here is my code: 

<g class="monogram">
    <mask id="rSquare" x="0" y="0" width="34" height="34">
        <text fill="#ffffff" x="0" y="0" font-family="verdana" font-size=
"26">LI</text>
    </mask>
    <rect mask="url(#rSquare)" height="34" rx="4" ry="4" width="34" fill="#fff"/>
</g>

So, the rect is essentially a square with a rounded border. So preferably I want the rSquare to be have a fill color and the text to be transparent within the shape creating an outline within it.

How would I go about this? I thought the above example would work, but it hasn't...

Thanks!

Upvotes: 2

Views: 49

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

You have various issues:

  • mask units default to objectBoundingBox but by the looks of it you're using userSpaceOnUse units
  • If you want to cut a hole in a shape the hole should be black so the mask doesn't apply there.
  • the text is off the edge of the page, I've increased its y position so it appears within the mask (the origin for text is the bottom left of the glyph cell by default)

So after all that I get this... 

<svg>
  <g class="monogram">
    <mask id="rSquare" x="0" y="0" width="34" height="34" maskUnits="userSpaceOnUse">
        <rect width="34" height="34" fill="white"/>
        <text fill="black" x="4" y="26" font-family="verdana" font-size="26">LI</text>
    </mask>
    <rect mask="url(#rSquare)" height="34" rx="4" ry="4" width="34" fill="blue"/>
</g>
</svg>

Upvotes: 3

Related Questions