javascript - How can I cut text from a shape in SVG? - Stack Overflow

admin管理员组

文章数量:1418657

I have an SVG file that looks like below:

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:

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.

I have an SVG file that looks like below:

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:

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.

• javascript
• css
• svg
• snap.svg
• svg.js

Share Improve this question Follow edited Nov 4, 2015 at 20:52 MojoJojo asked Nov 4, 2015 at 19:36 MojoJojoMojoJojo 4,24244 gold badges3131 silver badges5555 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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)"/>

本文标签： javascriptHow can I cut text from a shape in SVGStack Overflow