Animation SVG―；单击“在Chromium和Safari中停止动画”

现在我完全不知道是什么导致了这个奇怪的bug，我希望能够尽可能好地描述它，但是代码已经变大了，发布所有这些不会导致一个明确的问题

1。设置：

后台的Box2dWeb动画，其中

Step（）

方法的触发由

window.requestAnimationFrame

在游戏循环实现后完成。每次调用»draw«方法时，b2body的转换都会被移交给

和

。

设置所需的动画，

充当身体的监视器，并驻留在内联

中

点击会被全局捕获，如果用户点击

或

目标会获得焦点，从而导致对身体施加力

2。错误：

总而言之，一切都按预期工作，动画为

及其相应的

运行，单击两者，焦点状态将正确更改，但在chromium和Safari中，当用户单击

时，

停止显示动画

以下是用于设置从b2Body到

的转换的代码：

其中

this.\u transformItem

指向

.transform.baseVal.getItem（0）

和

this.\u sprite.transform

到自定义类型的变换矩阵

下面是捕捉点击的代码：

function getClickTargets( target ){
    var targets = { 'sprite' : null, 'link' : null };
    while( target ){
    if( target.nodeName.toLowerCase() === 'a' && 
        targets.link == null ){
        targets.link = target;
    }

    if( target.hasAttribute &&
        target.hasAttribute( 'data-sprite-id' ) && 
        targets.sprite == null ){
            targets.sprite = this._stage.getSpriteById( 
                target.getAttribute( 'data-sprite-id' ) );
    }

    if( target.nodeName.toLowerCase() == 'path' ){
        var attr = target.getAttributeNS( NS, 'monitor-for-sprite' );
        if( attr != '' ){
            targets.sprite = this._stage.getSpriteById( attr );
        }
    }

    if( targets.link != null && target.sprite != null ){
        break;
    }
        target = target.parentNode;
    }
        return targets;
};

在FF、IE9/10、Chrome和Opera中，一切都按其应有的方式运行，唯一导致错误行为的原因是»点击«以

为目标。矩阵是正确的，因为动画对于

保持正确运行

是什么导致了这种情况，我应该在哪里搜索，是否有人有想法或有类似的错误

编辑：

这可能是因为事件被捕获和处理»异步«到整个运行»更新标记«的事实造成的吗

编辑2:

我注意到，如果启动web inspector并观察元素，同样的问题也会发生，但所有

元素都会冻结

编辑3:

我现在已经让它运行了，至少在chromium中，但我想Safari也会这样做。我将»draw«函数稍微更改为：

function(){
    var str = this._sprite.transform;
    var mtrs = this._transformItem.matrix;

    mtrs.a = str.a1;
    mtrs.c = str.a2;
    mtrs.e = str.a3;
    mtrs.b = str.b1;
    mtrs.d = str.b2;
    mtrs.f = str.b3;



    //this._transformItem.setMatrix( mtrs ); //old line
    this._transformList.replaceItem( 
        this._transformList.createSVGTransformFromMatrix( mtrs ), 0 ); //new working line
}

如果有人知道为什么它只与一个新的»SVGTransform«一起工作，那么最好让我知道。否则我假设这是一种bug

function(){
    var str = this._sprite.transform;
    var mtrs = this._transformItem.matrix;

    mtrs.a = str.a1;
    mtrs.c = str.a2;
    mtrs.e = str.a3;
    mtrs.b = str.b1;
    mtrs.d = str.b2;
    mtrs.f = str.b3;



    //this._transformItem.setMatrix( mtrs ); //old line
    this._transformList.replaceItem( 
        this._transformList.createSVGTransformFromMatrix( mtrs ), 0 ); //new working line
}