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内部的文本是可变的，动态填充，因此我无法预处理＆＃34; SVG文件。是否有一种方法可能使用偶数填充或类似的东西来创建＆＃34;排除＆＃34;为了交集？是否可以使用其中一个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中的形状中剪切文本？

1 个答案: