ример кодаhttps://codepen.io/yury-leonov/pen/rZxxQE

Код из примера:

$(".example").on("click", function(e){
  $(e.target).toggleClass("reverse");
})

.reverse{
    transform: scaleX(-1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width: 700px;height: 700px;margin-left: 100px">
    <svg viewBox="-200 0 700 700">
        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="150px" x="50", y="50"/>
        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="100px" x="100", y="0"/>
      <!--x value can be changed during time-->
    </svg>
</div>

Выпуск:

Стрелка движется со своей позиции

Ожидаемое:

Стрелка перевернута. Оставайтесь на том же месте. Делайте это только на основе css (без js расчета конечного значения x и его настройки)

PS:

Жесткий код для translateX (- ??? px) не является опцией, потому что может быть много объектов, которые следует поменять местами.