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

Question

我的目标是使用 react-native-svg 创建一个文本居中的椭圆。我发现了 mask in their docs. The one thing I'm trying to figure out is creating a, cutout effect, similar to how it's done in 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>

Answer 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>

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

Creating a text cutout effect from shapes in react-native-svg

svg

reactjs

react-native

react-native-svg