SVG。使用css反转图像。将图像保存在同一个地方

Question

这是一个codepen示例https://codepen.io/yury-leonov/pen/rZxxQE

Code from example:

$(".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>

Issue:

箭头从它的位置移动

Expected:

箭头是逆转的。住在同一个地方。只做基于css（没有js计算最终的x值并设置它）

PS:

translateX（ - ??? px）的硬编码不是一个选项，因为可能有许多对象应该被颠倒。

Answer 1

使用transform-origin和transform-b​​ox

$(".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

我找到了一个解决方案，但我不确定你会喜欢它：我将变换原点设置为图像宽度的一半（75px）并添加x坐标（50px），因此它将是75 + 50 = 125px。

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