svg - 如何使用透明文本创建 SVG？

Question

我正在尝试创建一个带有透明文本的 svg 按钮。看起来在 React-native 中没有办法轻松地做到这一点，所以也许我会创建一个 svg，它会有透明的文本。我怎么做？

我已经尝试在 Figma 中做到这一点，但看起来唯一的方法就是在后面放置一个特定的图像。文字不可能真正透明，它只能掩盖一张图片。

标签： svg

Answer 1

您可以使用带有白色矩形和黑色文本的 svg 蒙版。您拥有的形状（例如本例中的圆角矩形）将仅绘制在蒙版的白色部分下方。由于文本是黑色的，它看起来像一个洞。

svg{border:solid; background:silver;}

<svg>
  <mask id="m">
   <rect x="10" y="10" width="280" height="130" fill="white" />
  <text x="150" y="75" font-size="90" font-family="arial" dominant-baseline="middle" text-anchor="middle" fill="black">text</text>
  </mask>
  <rect x="10" y="10" width="280" height="130" rx="20" mask="url(#m)" />
</svg>