如何使用透明文本创建 SVG?

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

我已经尝试在 Figma 中做到这一点,但看起来唯一的方法是将特定图像放在后面。文字不可能真正透明,只能遮住图片。

如何使用透明文本创建 SVG?

slxxfl0000 回答:如何使用透明文本创建 SVG?

您可以使用带有白色矩形和黑色文本的 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>

本文链接:https://www.f2er.com/15248.html

大家都在问