SVG анимация умирает в Chrome

Как получилось, что эта анимация SVG-пирога умирает после завершения в Chrome? Прекрасно работает в Firefox.SVG анимация умирает в Chrome

http://jsfiddle.net/xgjpL3bg/14/

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);

источник

2014-09-06 Mark Boulder

Они, как правило, довольно неудобный. Наличие двух анимаций с переменным началом начинается и заканчивается, может стать сложным. Во-первых, я думаю, что некоторые браузеры плохо обрабатывают такие вещи, как beginElement (или вообще), тогда вам нужно выяснить, в каком состоянии находится анимация, прежде чем она начнется, а также во время и после (особенно с замораживанием). Я думаю, что это достойный опыт обучения, но если у вас есть много таких вещей, вы можете найти его лучше, используя библиотеку, такую как Raphael/Snap, если вы застряли слишком долго или у вас нет решения. – Ian

Я хочу проверить Snap, поскольку я слишком долго ловил это. Помните все другие времена, когда вы помогли мне в этой же проблеме? Хотя на этот раз мой код намного проще. Любой шанс, который вы могли бы создать демо на странице Snap Dabbles? –

Might Snap также освобождает меня от этой проблемы. Интересно? http://stackoverflow.com/questions/25319325/fully-round-svg-circle-in-chrome-bug-workaround –

Я думаю, что его стоит использовать Рафаэль или оснастку (или один из других библиотек SVG), когда дело доходит до запуска/перезапуск анимации. Основная причина заключается в том, что его довольно сложно контролировать с помощью beginElement. Последнее, что я проверил, поддержка браузера была не очень хорошо освещена. Также вы должны думать о состояниях анимации svg otherswise, когда используете такие вещи, как заполнение и замораживание, и это становится немного неинтуитивным, поэтому вы можете потратить на него довольно много времени.

Использование оснастки Вы могли бы сделать что-то вроде ...

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); 
});

Вы, наверное, хотите поменять в течение последних 2-х событий мыши с обработчиком JQuery, если вы хотите, чтобы работать на DIV (как в противном случае они может сбрасываться, когда анимация запускается, если мышь находится на месте над анимационным svg, но она должна выделять структуру).

jsfiddle

источник

2014-09-07 19:02:17 Ian

Довольно круто - большое вам спасибо. Этот код проще и интуитивно понятен. Однако - 1) есть ли способ сделать его полностью круглым в Chrome? 2) При загрузке (Firefox и Chrome) видно, что половина пирога видна, а иногда и при наведении на нее анимирует неправильный путь. –

Вы хотите, чтобы вы начали полностью отображаться? – Ian

Привет! Хорошо, было бы здорово, если бы он мог быть невидимым по умолчанию, как в оригинальной скрипке, а затем появиться и начать анимацию при наведении. См. Обновленный вопрос о том, как выглядит ваша скрипка. –

SVG анимация умирает в Chrome

ответ

Смежные вопросы