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> 

你可以试试这个代码here

看起来onbegin事件的iOS设备上无法工作，剂量有人在这里有一个线索？

Answer 1

目前尚未在webkit中实现。你会为bug 81995写一个补丁或者付给其他人为你做。

Answer 2

@Rebert，你是对的，但我发现另一种方式来解决浏览器的这个问题这是不支持开始/结束事件，这里是代码：

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