如何从 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 中的文本是可变的，因此我不能 "pre-process" SVG 文件。有没有办法使用 evenodd fill 或类似的东西来为交叉点创建 "exclusion"？是否可以使用 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)"/>

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

How can I cut text from a shape in SVG?

javascript

css

svg

snap.svg

svg.js