CODEWITHSUNDEEP
svg
stkvtflw
stkvtflw

Reputation: 13507

How do I create SVG with transparent text?

I'm trying to create a svg button with transparent text. It looks like there is no way to do it easily in React-native, so maybe I'll just create an svg, that will have transparent text. How do I do that?

I've tried to do it in Figma, but it looks like the only way to do it there is to put a specific image behind. Text can't be truly transparent, it can only mask a picture.

enter image description here

Upvotes: 1

Views: 911

Answers (1)

enxaneta
enxaneta

Reputation: 33024

You can use an svg mask with a white rectangle and a black text. The shapes you have - like the rectangle with rounded corners in this example - will be painted only under the white parts of the mask. Since the text is black it will apear like a hole.

svg{border:solid; background:silver;}
<svg>
  <mask id="m">
   <rect x="10" y="10" width="280" height="130" fill="white" />
  <text x="150" y="75" font-size="90" font-family="arial" dominant-baseline="middle" text-anchor="middle" fill="black">text</text>
  </mask>
  <rect x="10" y="10" width="280" height="130" rx="20" mask="url(#m)" />
</svg>

Upvotes: 2

Related Questions