如何从SVG中的形状中剪切文本？

Question

我有一个SVG文件,如下所示:

有没有办法让文字透明？也就是说,而不是填充颜色,我想要切出图层并显示背景中的内容(SVG的内容,即SVG下面的任何内容).换句话说,使路径和文本的交集是透明的？

SVG文件的内容:

<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>

我尝试更改文本元素的透明度,但这只会影响文本.SVG内部的文本是动态填充的,因此我无法"预处理"SVG文件.是否有一种方法可能使用偶数填充或类似的东西来创建交叉的"排除"？是否可以使用其中一个SVG JS库,如snap.svg或svg.js？

编辑: 最终的SVG应如下所示:

上面发布的SVG代码用于星号和文本.最终的SVG应该具有通过文本显示的背景颜色,同时保留星形的外形.

Answer 1

创建一个蒙版,通过文本元素将文本放入其中,然后在要剪切孔的形状上使用蒙版.这样的东西......

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