如何创建带有透明文字的SVG按钮？

核心原理 #

通过SVG的遮罩能力实现文字区域镂空透明，非文字区域保留按钮填充样式，文字部分可以透出SVG下方的任意背景，完全符合你的需求。

手动编写SVG代码（推荐，灵活度最高） #

直接写原生SVG代码，不需要依赖设计工具，示例如下：

<svg width="200" height="60" viewBox="0 0 200 60">
  <defs>
    <!-- 定义遮罩：白色区域显示，黑色区域透明 -->
    <mask id="镂空文字遮罩">
      <rect width="200" height="60" rx="12" fill="white" />
      <text x="100" y="38" text-anchor="middle" font-size="20" font-weight="bold" fill="black">
        示例按钮
      </text>
    </mask>
  </defs>
  <!-- 按钮填充层，可自定义为渐变、图案等任意样式 -->
  <rect width="200" height="60" rx="12" fill="#165DFF" mask="url(#镂空文字遮罩)" />
</svg>

你可以按需修改按钮尺寸、圆角值、填充色、文字内容、字号等参数，调整到符合你的设计要求。

Figma导出操作步骤 #

如果你习惯用Figma制作，可按以下步骤操作：

• 绘制你需要的按钮外形（比如圆角矩形），设置好你想要的按钮填充色
• 输入按钮文字，调整好字体、字号、字重，放在按钮上方居中对齐
• 同时选中底层的按钮矩形和上层的文字，点击顶部属性栏的「布尔运算 - 减去顶层」
• 选中生成的新图层，导出格式选择SVG即可，导出的文件自带文字镂空效果

React Native适配说明 #

• 安装react-native-svg库，可直接解析使用上述SVG代码，也可以把SVG转成对应JSX组件调用
• 矢量格式支持任意缩放不会失真，性能远高于基于图片实现的遮罩效果

效果示例 #

内容的提问来源于stack exchange，提问作者stkvtflw