d3 переход анимация многоугольника SVG в Firefox

Question

Я использую 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?

Answer 1

Вы пробовали с D3v5.EasyElastic ведет себя по-другому в Chrome по сравнению с D3v3.

Знаете ли вы, что 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>