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

在此处查看代码笔演示：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 中的 SVG 文本剪辑路径

SVG text clippath in Firefox

css

svg

css-transforms

clip-path