ios - SVG 动画的 'onbegin' 事件未在 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>

你可以试试这个代码here

它看起来 onbegin 事件在 IOS 设备上不起作用，这里有人知道吗？

Answer 1

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