如何在不改变位置的情况下翻转SVG图像？角色翻转位置偏移求助

我正在制作一款角色可在不同位置间移动的小游戏，当角色返回上一位置时需要进行翻转操作。但目前通过代码实现翻转后，角色的位置发生了偏移，不符合预期。以下是原始实现代码：

if(mv=='next'){
    var nxtpoint = parseInt(current)+1;
    var nxtpositionx =parseInt($("#pointmap-"+nxtpoint).attr('x'));
    var nxtpositiony = parseInt($("#pointmap-"+nxtpoint).attr('y'));
    var crntnxtbtn = $("#nxt-"+current);
    var crntprvbtn = $("#prv-"+current);
    var nxtbtn = $("#nxt-"+nxtpoint);
    var prvbtn = $("#prv-"+nxtpoint);
    charmv.css('transform','rotateY(0deg)');            
    charmv.animate({ "x": nxtpositionx+charpositionx, "y": nxtpositiony+charpositiony }, "slow" );
    if(nxtbtn){
        nxtbtn.css('display','block');
    }
    prvbtn.css('display','block');

    crntnxtbtn.css('display','none');
    crntprvbtn.css('display','none');
}

if(mv=='prev'){
    var prvpoint = parseInt(current)-1;
    var prvpositionx = parseInt($("#pointmap-"+prvpoint).attr('x'));
    var prvpositiony = parseInt($("#pointmap-"+prvpoint).attr('y'));
    var crntnxtbtn = $("#nxt-"+current);
    var crntprvbtn = $("#prv-"+current);
    var nxtbtn = $("#nxt-"+prvpoint);
    var prvbtn = $("#prv-"+prvpoint);
    // charmv.css('transform','rotateX(180deg)');
    // charmv.css('transform-origin','center');
    charmv.css('transform','scale(-1, 1)')
    charmv.animate({ "x": prvpositionx+charpositionx, "y": prvpositiony+charpositiony }, "slow" );            

    if(prvbtn){
        prvbtn.css('display','block');
    }
    nxtbtn.css('display','block');
    crntnxtbtn.css('display','none');
    crntprvbtn.css('display','none');
}

问题原因 #

使用scale(-1,1)翻转时，元素默认以左上角为变换原点，翻转后元素会以该点为基准反向缩放，导致视觉上的位置偏移；同时jQuery的animate操作的是元素的x/y属性，和CSS transform的变换逻辑相互独立，容易产生冲突。

修复方案 #

方案1：统一使用CSS Transform处理位移与翻转 #

将位移和翻转合并到同一个transform属性中，并设置变换原点为元素中心，避免偏移：

if(mv=='next'){
    var nxtpoint = parseInt(current)+1;
    var nxtpositionx = parseInt($("#pointmap-"+nxtpoint).attr('x'));
    var nxtpositiony = parseInt($("#pointmap-"+nxtpoint).attr('y'));
    var crntnxtbtn = $("#nxt-"+current);
    var crntprvbtn = $("#prv-"+current);
    var nxtbtn = $("#nxt-"+nxtpoint);
    var prvbtn = $("#prv-"+nxtpoint);
    
    // 设置变换原点为中心，合并翻转重置与位移
    charmv.css({
        'transform-origin': 'center center',
        'transform': 'rotateY(0deg) translate(' + (nxtpositionx + charpositionx) + 'px, ' + (nxtpositiony + charpositiony) + 'px)'
    });
    
    if(nxtbtn){
        nxtbtn.css('display','block');
    }
    prvbtn.css('display','block');

    crntnxtbtn.css('display','none');
    crntprvbtn.css('display','none');
}

if(mv=='prev'){
    var prvpoint = parseInt(current)-1;
    var prvpositionx = parseInt($("#pointmap-"+prvpoint).attr('x'));
    var prvpositiony = parseInt($("#pointmap-"+prvpoint).attr('y'));
    var crntnxtbtn = $("#nxt-"+current);
    var crntprvbtn = $("#prv-"+current);
    var nxtbtn = $("#nxt-"+prvpoint);
    var prvbtn = $("#prv-"+prvpoint);
    
    // 设置变换原点为中心，合并翻转与位移
    charmv.css({
        'transform-origin': 'center center',
        'transform': 'scale(-1, 1) translate(' + (prvpositionx + charpositionx) + 'px, ' + (prvpositiony + charpositiony) + 'px)'
    });
    
    if(prvbtn){
        prvbtn.css('display','block');
    }
    nxtbtn.css('display','block');
    crntnxtbtn.css('display','none');
    crntprvbtn.css('display','none');
}

方案2：保留jQuery Animate，抵消翻转偏移 #

如果坚持使用jQuery的animate，需要计算元素宽度，抵消scale(-1)带来的x轴偏移：

if(mv=='prev'){
    var prvpoint = parseInt(current)-1;
    var prvpositionx = parseInt($("#pointmap-"+prvpoint).attr('x'));
    var prvpositiony = parseInt($("#pointmap-"+prvpoint).attr('y'));
    var crntnxtbtn = $("#nxt-"+current);
    var crntprvbtn = $("#prv-"+current);
    var nxtbtn = $("#nxt-"+prvpoint);
    var prvbtn = $("#prv-"+prvpoint);
    
    // 设置变换原点为中心，执行翻转
    charmv.css({
        'transform-origin': 'center center',
        'transform': 'scale(-1, 1)'
    });
    
    // 计算元素宽度，抵消翻转带来的x偏移
    var charWidth = charmv.width();
    charmv.animate({ 
        "x": prvpositionx + charpositionx - charWidth, 
        "y": prvpositiony + charpositiony 
    }, "slow" );            

    if(prvbtn){
        prvbtn.css('display','block');
    }
    nxtbtn.css('display','block');
    crntnxtbtn.css('display','none');
    crntprvbtn.css('display','none');
}

内容的提问来源于stack exchange，提问作者Gasta