我正在尝试创建一个带有透明文本的 svg 按钮。看起来在 React-native 中没有办法轻松做到这一点,所以也许我会创建一个 svg,它将具有透明文本。我该怎么做?
我已经尝试在 Figma 中做到这一点,但看起来唯一的方法是将特定图像放在后面。文字不可能真正透明,只能遮住图片。
您可以使用带有白色矩形和黑色文本的 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>