[英]d3 transition SVG polygon animation not smooth in Firefox
我正在使用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中顺利过渡?
您是否尝试过D3v5。 与D3v3相比,easyElastic在Chrome中的行为有所不同。
您知道easyElastic对过渡有什么作用吗?
尝试使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.