Question

我正在使用文本clippath来创建一个显示文本的SVG，这样我就可以为背景设置动画，以获得有趣的文本显示效果。

它在Chrome和Safari中运行良好但在Firefox中存在clippath的问题。

<svg viewBox="0 0 600 150">

  <!-- Clippath  with text -->
  <clippath id="cp-text">
   <text text-anchor="left"
      x="0"
      y="50%"
      dy=".35em"
      class="text--line"
      >
   hello
   </text>
  </clippath>


  <!-- Group with clippath for text-->
  <g clip-path="url(#cp-text)" class="colortext">
    <!-- Animated shapes inside text -->
    <polyline class="anim-shape" points="559.91 153.84 526.17 -11.62 478.32 -11.62 512.05 150.84 559.91 153.84" style="fill: #4c4870"/>
    <polyline class="anim-shape" points="599.75 149.75 599.92 -0.62 528.07 -0.62 558.75 150.75 599.75 149.75" style="fill: #93d2c4"/>
    <polygon class="anim-shape" points="479.07 -11.62 395.78 -11.62 429.52 153.84 512.8 153.84 479.07 -11.62" style="fill: #f89c2c"/>
  </g> 
</svg>

我正在使用CSS变换在加载（缩放和平移）上设置polgyon形状的动画。

请参阅此处的codepen演示：https://codepen.io/njpatten/pen/zwEeev

我已经尝试更新svg内部的polgyons但是clippath文本呈现被延迟似乎是一个问题。

知道Firefox中的问题可能是什么？提前感谢任何建议或帮助！

Answer 1

似乎Firefox需要在您创建的文本掩码旁边呈现某些内容，而动画形状的比例为0,1，它会出现一些问题。我添加了这个

<rect x="0" y="0" width="100%" height="100%" fill="transparent" />

就在第一个多边形之前，它现在似乎与Chrome类似。如果您不想要宽度和高度，我认为您可以使用width和height。

希望有所帮助

Firefox

1 个答案: