CODEWITHSUNDEEP
javascriptcsssvgsnap.svgsvg.js
MojoJojo
MojoJojo

Reputation: 4232

How can I cut text from a shape in SVG?

I have an SVG file that looks like below:

enter image description here

Is there a way to make the text transparent? That is, instead of a fill color I want to cut out the layers and show what's in the background (of the SVG i.e. whatever lies underneath the SVG). In other words, make the intersection of the path & text to be transparent?

Contents of the SVG file:

<svg width="36.087" height="34.314" viewBox="0 0 36.087 34.313999" x="1190.56" y="753.5780000000001">
    <path fill="#63a95c" d="M36.087 13.107l-13.305-.66L18.047 0l-4.742 12.446L0 13.106l10.377 8.352L6.89 34.314l11.157-7.285 11.14 7.284-3.475-12.856" fill-rule="evenodd"/>
    <text font-size="10px" x="10.498" y="23.484" fill="#ffffff" fill-opacity="1" font-family="OpenSans-Bold">8.5</text>
</svg>

I tried changing the transparency of the text element, but that only affects the text. The text inside the SVG is variable is populated dynamically so I can't "pre-process" the SVG file. Is there a way perhaps using evenodd fill or something similar to create an "exclusion" for intersection? Is it possible using one of the SVG JS libraries such as snap.svg or svg.js?

Edit: The final SVG should look like this:

enter image description here

The SVG code posted above is for the star and the text. The final SVG should have the background color showing through the text while retaining the outer shape of the star.

Upvotes: 3

Views: 2563

Answers (1)

Robert Longson
Robert Longson

Reputation: 124014

Create a mask, put the text in it via a text element and then use the mask on the shape you want to clip a hole in. Something like this...

head, body {
  width:100%;
  height:100%;
}
<svg width="100%" height="100%" viewBox="0 0 200 200">
  <defs>
    <mask id="sample" maskUnits="userSpaceOnUse">
       <rect width="100%" height="100%" fill="white"/>
       <text x="12" y="23" font-size="10" font-family="Impact">9.0</text>
    </mask>
  </defs>

<path fill="#63a95c" d="M36.087 13.107l-13.305-.66L18.047 0l-4.742 12.446L0 13.106l10.377 8.352L6.89 34.314l11.157-7.285 11.14 7.284-3.475-12.856" fill-rule="evenodd" mask="url(#sample)"/>

Upvotes: 8

Related Questions