Question

如果我的术语不正确，请耐心等待。对此非常陌生。

我正在创建文本元素的掩码

<svg>
 <mask id="TextMask">
    <text id="TextMask" 
          class="Text-Mask" 
          x="10" y="193">Some Text to Mask</text>
  </mask>

类Text-Mask只包含字体/锚/字体大小。

然后我想对此文本应用渐变着色，而仅此文本。我创建了一个gradientRect元素来应用于文本。

  <svg mask="#TextMask" width="100%" height="100%">
    <gradientRect width="100%" height="100%"
      gradient-type="linear"
      gradient-x1="0" gradient-y1="50"
      gradient-x2="0" gradient-y2="100%-50"
      gradient-color1="red"
      gradient-color2="yellow" />
  </svg>
</svg>

现在这种方法很好，但它并不是我所希望的效果。

根据我的理解，当我创建此gradientRect元素时，我会在整个屏幕的背景上创建它。

我想要的仅适用于整个gradientRect到覆盖文本所占用的区域。（例如，文本的顶部是红色，然后它变为文本底部的渐变为黄色）。截至目前，我现在拥有它，文本位于gradientRect的橙色/黄色区域。

我不确定如何使用gradient-y1 y2完成此操作。

我是否能够获得文本的大小（和位置）（无论字体大小是否发生变化或将文本放在屏幕上的其他位置）并轻松应用，或者我必须强制使用它和硬编码它只适合文本区域？

FitBit：仅屏蔽文本大小

0 个答案: