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

【问题标题】：How can I cut text from a shape in SVG?如何从 SVG 中的形状中剪切文本？
【发布时间】：2016-02-05 11:01:41
【问题描述】：

我有一个如下所示的 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 应该具有通过文本显示的背景颜色，同时保留星形的外部形状。

【问题讨论】：

标签： javascript css svg snap.svg svg.js

【解决方案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)"/>

【讨论】：

这将剪切“来自”星星的文本，我只剩下剪切了“星星”其余部分的文本。我想保持星号只使文本透明——比如 Inkscape 中的“排除”选项。
那么面具是最简单的。