Firefox 上的延迟动画答案

【问题标题】：Laggy animation on FirefoxFirefox 上的延迟动画
【发布时间】：2015-03-16 15:50:33
【问题描述】：

我已经使用mask 和filter 复制了this 效果。

这就是我所做的：

在两个不同的text 元素上应用了两个masks，一个在左侧用于模糊文本，一个在右侧用于普通文本。
动画masks 和ellipse 以获得最终效果。

一切正常，但动画在 Firefox 上滞后。有什么方法可以让动画流畅吗？

body, html {
  height: 100%;
  margin: 0;
  background: -webkit-radial-gradient(center, ellipse, #300 10%, #000 100%);
  background: -moz-radial-gradient(center, ellipse, #300 10%, #000 100%);
  background: radial-gradient(center, ellipse, #300 10%, #000 100%);
}
svg {
  position: relative;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<svg width="100%" height="200" viewBox="0 0 700 200">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
    <mask id="mask-left" maskUnits="userSpaceOnUse" x="0" y="0" width="700" height="200">
      <path id="d1" d="M0,30 h0 c-35,15 -35,125 0,140 h0z" fill="white" />
      <animate xlink:href="#d1" attributeType="XML" attributeName="d" from="M0,30 h0 c-35,15 -35,125 0,140 h-0z" to="M0,30 h700 c-35,15 -35,125 0,140 h-700z" dur="10s" repeatCount="indefinite" />
    </mask>
    <mask id="mask-right" maskUnits="userSpaceOnUse" x="0" y="0" width="700" height="200">
      <path id="d2" d="M700,30 h-672 c-35,15 -35,125 0,140 h672z" fill="white" />
      <animate xlink:href="#d2" attributeType="XML" attributeName="d" from="M700,30 h-700 c-35,15 -35,125 0,140 h700z" to="M700,30 h0 c-35,15 -35,125 0,140 h0z" dur="10s" repeatCount="indefinite" />
    </mask>
  </defs>
  <text mask="url(#mask-right)" x="350" y="120" fill="white" text-anchor="middle" font-size="50" font-family="Ubuntu">Magic of Filter and Masking</text>
  <text mask="url(#mask-left)" filter="url(#blur)" x="350" y="120" fill="white" text-anchor="middle" font-size="50" font-family="Ubuntu">Magic of Filter and Masking</text>
  <ellipse id="e" cx="26" cy="100" rx="25" ry="70" fill="none" stroke="#600" stroke-width="2" />
  <animate xlink:href="#e" attributeType="XML" attributeName="cx" from="0" to="700" dur="10s" repeatCount="indefinite" />
</svg>

【问题讨论】：

我不是SVG 方面的专家，但我可以告诉你的是，如果你使用codepen，它在 Firefox 上确实落后，但如果你使用你在 SO 上使用的代码sn -p 运行流畅，见here，只需编辑SVG

标签： firefox animation svg filter mask

【解决方案1】：

我查看了您在不同浏览器中的 svg 动画。但它在 FireFox 和 Chrome 中运行没有任何滞后，但在 Internet Explorer 中它根本不运行。

可以使用Fakesmile，Internet Explorer 支持。

【讨论】：

谢谢！我知道Fakesmile，但这仍然不能回答我的问题。