Question

为什么这个SVG派对计时器动画在Chrome完成后会死掉？在Firefox中正常工作。

HTML：

<div class="test">
    <div class="pie">
        <svg id="me" viewBox="0 0 350 350">
            <path d="M 175, 175 m 0, -75 a 75, 75 0 1, 0 0, 150 a 75, 75 0 1, 0 0, -150" fill="none" stroke="#ccc" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000">
                <animate id="halt" attributeName="stroke-dashoffset" from="125" to="125" dur="1ms" fill="freeze" />
                <animate id="action" begin="indefinite" attributeName="stroke-dashoffset" from="125" to="600" dur="2s" fill="freeze" />
            </path>
        </svg>
    </div>
</div>

JS：

function resetPie() {
  $('#action')[0].endElement();
  $('#halt')[0].beginElement();
}

$('.test').bind('mouseenter', function() {
    $('#action')[0].beginElement();  
}).mouseleave(resetPie);

$('#action').on('endEvent', resetPie);

Answer 1

在开始/重新启动动画时，我认为值得使用Raphael或Snap（或其他SVG库之一）。主要原因是，使用beginElement进行控制非常繁琐。最后我查了一下，浏览器的支持并没有得到很好的报道。当你使用填充和冻结之类的东西时，你还必须考虑svg动画的状态，它会变得有点不直观，所以你可能会浪费很长时间。

使用Snap你可能会做类似的事情......

var myPath = s.select("#mypath");

function reset( el ) {
    el.stop(); // stop any existing animation on that element
    el.attr({ "stroke-dashoffset": 125 });
};

function startAnim( el ) {
    el.animate( { "stroke-dashoffset": 600 }, 1000 );
};

s.mouseover( function() {
   startAnim( myPath );
} );

s.mouseout( function() {
   reset( myPath );
} );

如果你希望它们在div上操作，你可能想要用JQuery处理程序交换最后2个鼠标事件（否则，如果鼠标在动画svg上运行，它们可能会在动画运行时重置，但它应该突出结构）。

jsfiddle

SVG动画在Chrome中消亡

1 个答案: