d3 过渡 SVG 多边形动画在 Firefox 中不平滑答案

【问题标题】：d3 transition SVG polygon animation not smooth in Firefoxd3 过渡 SVG 多边形动画在 Firefox 中不平滑
【发布时间】：2019-06-15 11:15:30
【问题描述】：

我正在使用 d3 为 SVG 多边形设置动画，如下所示...

https://jsfiddle.net/p6jy5t0n/35/

它在 Chrome/Safari 上很流畅，但在 Firefox 上却非常生涩——就其位置变化而言，明星甚至似乎在跳舞。

有问题的代码只是依赖于链接 d3 的转换来使星形变大，然后通过增加它的笔画宽度收缩回正常...

d3.select(".svgStar").transition().duration(500).ease("easeElastic")
  .each("end",function(){
    d3.select(this).transition().duration(500).ease("easeElastic")
      .style("stroke-width","0.1px")
      .style("fill",starCol);
  })
  .style("stroke-width","2.5px")
  .style("fill","#fff400");

您有什么想法可以在 Firefox 中实现更顺畅的过渡吗？

【问题讨论】：

在 Firefox 中对我来说非常流畅。也许 Firefox 开启了软件渲染，而不是硬件渲染？
嗯，我试了好几次，都没有发现 Safari/Chrome 和 Firefox 有什么区别。 在问题中（不在 cmets 中）指定 FF 版本和操作系统。
哦！这很奇怪——它在 Chrome 上很流畅，在我的 Firefox 上很糟糕
macOS Sierra 10.13.6 上的 Firefox Quantum 64.0.2
@d3wannabe 巧合的是，这正是我正在使用的正是。所以，你在其他地方遇到了一些奇怪的问题。

标签： javascript firefox d3.js svg

【解决方案1】：

您是否尝试过使用 D3v5。与 D3v3 相比，easeElastic 在 Chrome 中的行为有所不同。

您知道easeElastic 对过渡的作用吗？

尝试d3.easeLinear 进行比较。

function transformStar(){
  var starCol = d3.select(".svgStar").style("fill");
  var starAnimationDuration = 500;

  d3.select(".svgStar").style("stroke","rgb(255, 218, 93)");

  d3.select(".svgStar")
    .transition().duration(starAnimationDuration).ease(d3.easeElastic)
      .style("stroke-width","2.5px")
      .style("fill","#fff400")
    .transition().duration(starAnimationDuration).ease(d3.easeElastic)
      .style("stroke-width","0.1px")
      .style("fill",starCol);
}

<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<div id="container">
  <svg>
    <g id="starG" style="transform:translateX(50px)">
      <polygon class="svgStar" fill="#ffda5d" stroke="none" w="9" cursor="default" points="94,20 101,43 125,43 106,58 113,80 94,66 74,80 80,58 62,43 86,43" style="transform: translate(-94px, 18px);">
      </polygon>
      <text x="0" y="74" id="starTxt" style="cursor: default; font-size: 12px; font-weight: bold; text-anchor: middle; fill: rgb(20, 171, 20); stroke-width: 0px;">
        Go!
      </text>
    </g>
  </svg>
</div>
<button onclick="transformStar();">
  Transform Star!
</button>

【讨论】：