SVG. Обратное изображение с помощью CSS. Хранить изображение в том же месте

Question

Вот пример кода ручки 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) - не вариант, потому что может быть много объектов, которые должны быть обращены.

Answer 1

Использовать transform-origin и transform-box

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

.reverse{
    transform: scaleX(-1);
    transform-origin: center;
    transform-box: fill-box;
}

<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>

Answer 2

Основываясь на ответе @Robert Longson, родилась идея сделать мини-анимацию персонажей - девушек и парней.
Их изображения будут вращаться, отворачиваться друг от друга. Возможны и другие варианты. На мой взгляд, это должно выглядеть довольно интересно.

Поворот назад и вперед каждого изображения после нажатия на выбранное изображение.

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

.reverse{
    transform: scaleX(-1);
    transform-origin: center;
    transform-box: fill-box;
}
.container {
 width:50%;
 height:50%;
}

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

<div class="container" >
    <svg viewBox="0 0 700 700">
        <image class="example" href="https://i.stack.imgur.com/eM5im.png" width="300px" height="450px" x="50", y="50"/>
        <image class="example" href="https://i.stack.imgur.com/eFoj1.jpg" width="300px" height="450px" x="350", y="0"/>
    </svg>
</div>

Answer 3

Я нашел решение, но не уверен, что оно вам понравится: Я установил источник трансформации на половину ширины изображения (75 пикселей) и добавил координату x (50 пикселей), чтобы она составляла 75 + 50 = 125 пикселей.

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