SVG animation's 'onbegin' event not fired on IOS - ios

Question

<svg xmlns="http://www.w3.org/2000/svg">
<title>On end test</title>
<circle r="50" cx="100" cy="100" style="fill: #F00">
<set attributeName="fill" attributeType="CSS" onbegin='alert("onbegin")'
onend='alert("onend")' to="#00F" begin="1s" dur="5s" />
</circle>
</svg>
you can try this code here
it looks onbegin event not work on the IOS device, dose anyone here has a clue?

Answer 1

#Rebert, you are right, but I found a another way to solve this problem in browsers which was not support begin/end event, here is the code:
window.XY = window.XY ? window.XY : {};
XY.svg = XY.svg ? XY.svg : {};
XY.svg.runtime_id = 0;
XY.svg.found_support_event = false;
XY.svg.SVG_Event_Compatibility = function(svg_object){
if(XY.svg.found_support_event) return;
if(XY.svg.runtime_id != 0) clearInterval(XY.svg.runtime_id);
var _animate_list = [];
var _animate_has_event_list = [];
_animate_list = svg_object.getElementsByTagName('animate');
if(_animate_list.length == 0){
return;
}else{
if(typeof _animate_list[0].onbegin !== 'undefined'){
XY.svg.found_support_event = true;
return;
}
}
var _length = _animate_list.length;
for(var i=0; i<_length; i++){
var _cur = _animate_list[i];
var _cur_obj = { target:_cur};
var _has_event = false;
var _begin_hold = _cur.getAttributeNode('onbegin');
var _end_hold = _cur.getAttributeNode('onend');
if(_begin_hold){
_cur_obj.begin = _begin_hold.value;
_cur_obj.duration = _cur.getSimpleDuration();
_has_event = true;
}
if(_end_hold){
_cur_obj.end = _end_hold.value;
_cur_obj.duration = _cur.getSimpleDuration();
_has_event = true;
}
if(_has_event){
//console.log(_cur_obj);
_animate_has_event_list.push(_cur_obj);
}
}
//console.log('start' ,_animate_has_event_list);
function Run(){
if(_animate_has_event_list.length == 0){
clearInterval(XY.svg.runtime_id);
}
var _length = _animate_has_event_list.length;
//console.log("==========================");
for(var i=0; i<_animate_has_event_list.length; i++){
var _cur_obj = _animate_has_event_list[i];
if(_cur_obj.begin == null && _cur_obj.end == null){
//console.log('remove' ,_animate_has_event_list.splice(i,1));
continue;
}
var _start_time = _cur_obj.target.getStartTime();
var _current_time = _cur_obj.target.getCurrentTime();
//console.log(_start_time, _current_time, _cur_obj.duration ,isNaN(_start_time) ,_start_time < Infinity
// ,!isNaN(_start_time) && _start_time < Infinity && _start_time > _current_time
// ,!isNaN(_start_time) && _start_time < Infinity && (_current_time - _start_time > _cur_obj.duration));
if(_cur_obj.begin){
if(!isNaN(_start_time) && _start_time < Infinity && _start_time < _current_time){
var _begin = eval(_cur_obj.begin);
if(typeof _begin === 'function'){
_begin.apply(_cur_obj.target);
}
_cur_obj.begin = null;
}
}
if(_cur_obj.end){
if(!isNaN(_start_time) && _start_time < Infinity && (_current_time - _start_time > _cur_obj.duration)){
var _end = eval(_cur_obj.end);
if(typeof _end === 'function'){
_end.apply(_cur_obj.target);
}
_cur_obj.end = null;
}
}
}
//console.log('runtime', _animate_has_event_list);
}
XY.svg.runtime_id = setInterval(Run, 100);
}

Answer 2

This is not implemented in webkit currently. You'd have write a patch for bug 81995 or pay someone else to do it for you.