从 react-native-svg 中的形状创建文本剪切效果答案

【问题标题】：Creating a text cutout effect from shapes in react-native-svg从 react-native-svg 中的形状创建文本剪切效果
【发布时间】：2021-04-19 17:11:39
【问题描述】：

我的目标是使用 react-native-svg 创建一个带有居中文本的椭圆。我在他们的文档中发现了mask 的功能。我试图弄清楚的一件事是创建一个 cutout 效果，类似于它在 CSS 中的做法：

文档展示了如何处理笔画和渐变等操作，但我只想根据文本的大小和形状遮盖椭圆的一部分。有谁知道有没有办法做到这一点？

<Svg width="100%" height="100%" viewBox="0 0 800 300">
  <Defs>
    <LinearGradient
      id="Gradient"
      gradientUnits="userSpaceOnUse"
      x1="0"
      y1="0"
      x2="800"
      y2="0"
    >
      <Stop offset="0" stopColor="white" stopOpacity="0" />
      <Stop offset="1" stopColor="white" stopOpacity="1" />
    </LinearGradient>
    <Mask
      id="Mask"
      maskUnits="userSpaceOnUse"
      x="0"
      y="0"
      width="800"
      height="300"
    >
      <Rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />
    </Mask>
    <Text
      id="Text"
      x="400"
      y="200"
      fontFamily="Verdana"
      fontSize="100"
      textAnchor="middle"
    >
      Masked text
    </Text>
  </Defs>
  <Rect x="0" y="0" width="800" height="300" fill="#FF8080" />
  <Use href="#Text" fill="blue" mask="url(#Mask)" />
  <Use href="#Text" fill="none" stroke="black" stroke-width="2" />
</Svg>

【问题讨论】：

标签： reactjs react-native svg react-native-svg

【解决方案1】：

以下是代码的几个问题以及解决方法：

text 元素需要在mask 内。
如果您还想对mask 使用渐变，则需要将stopColor 和stopOpacity 更正为stop-color 和stop-opacity。
如果您希望文本在rect 中形成剪切，则需要将mask 应用到rect。

这是一个包含渐变的工作示例：

<svg width="100%" height="100%" viewBox="0 0 800 300">
  <defs>
    <linearGradient
      id="Gradient"
      gradientUnits="userSpaceOnUse"
      x1="0"
      y1="0"
      x2="800"
      y2="0"
    >
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="700" height="300" fill="url(#Gradient)" />
      <text
      id="Text"
      x="400"
      y="200"
      fontFamily="Verdana"
      fontSize="100"
      textAnchor="middle"
    >
      Masked text
    </text>
      
    </mask>
  </defs>
  
  <rect x="0" y="0" width="900" height="300" fill="#FF8080" mask="url(#Mask)"/>
  
</svg>

评论后编辑：

对于没有渐变的版本，只需用白色填充遮罩rect：

<svg width="100%" height="100%" viewBox="0 0 800 300">
  <defs>
    <mask id="Mask">
      <rect x="0" y="0" width="700" height="300" fill="white" />
      <text
      id="Text"
      x="400"
      y="200"
      fontFamily="Verdana"
      fontSize="100"
      textAnchor="middle"
    >
      Masked text
    </text>
      
    </mask>
  </defs>
  
  <rect x="0" y="0" width="900" height="300" fill="#FF8080" mask="url(#Mask)"/>
  
</svg>

【讨论】：

谢谢。只是出于好奇，如果您只有一个实心矩形而不是渐变，如何实现这种剪切效果？仅用填充替换渐变似乎对我来说隐藏了文本。
只需填写white。我用一个例子编辑了答案。
完美。谢谢！未来观众需要注意的一件事是，这是用 html 编写的，而不是 react 组件。我喜欢你的回答，因为你能够提供代码 sn-ps。易于翻译。