Css Firefox中的SVG文本剪辑

我正在使用一个文本剪辑来创建一个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演示：

我尝试过更新svg中的Polgyon，但clippath文本呈现延迟似乎是个问题

---

你知道Firefox有什么问题吗？提前感谢您的任何建议或帮助

Firefox似乎需要在您创建的文本掩码旁边渲染一些东西，虽然动画形状的比例为0,1，但它遇到了一些问题。 我加了这个

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

就在第一个多边形之前，它现在的工作原理似乎与Chrome类似。 如果你不想要全宽和全高，我想你可以使用

宽度

和

高度

---

希望它能有所帮助

顺便说一句，这是一个非常聪明的好主意：）做得好。这似乎是Firefox中的一个bug。我报告说，找到这个解决方法做得很好。请注意，此修复仅对该元素所涵盖的组部分有帮助。因此，如果元素宽度大于1000，动画仍将部分失败。更好的rect应该是

像符咒一样工作！非常感谢。很高兴听到这个消息：）