Firefox 中的 SVG 文本剪贴路径

Question

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

它在 Chrome 和 Safari 中运行良好，但在 Firefox 中存在剪辑路径问题。

<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 变换为加载时的多边形形状设置动画（缩放和平移）。

在此处查看 codepen 演示：https://codepen.io/njpatten/pen/zwEeev

我已尝试更新 svg 中的 polgyons，但这似乎是剪辑路径文本渲染延迟的问题。

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

Answer 1

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

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

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

希望对你有帮助