SVG。使用 css 反转图像。将图像保持在同一位置答案

【问题标题】：SVG. Reverse image using css. Keep image at the same placeSVG。使用 css 反转图像。将图像保持在同一位置
【发布时间】：2019-02-07 11:02:43
【问题描述】：

这是一个代码笔示例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) 的硬编码不是一个选项，因为可能有很多对象应该被反转。

【问题讨论】：

标签： image css svg css-animations

【解决方案1】：

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

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

【讨论】：

抱歉，此解决方案不起作用。因为它是硬编码的。我在 SVG 上添加了 2-nd 数组以及如何检查 - transform-origin: 125px; - 仅适用于一个箭头
不是真的，你可以使用javascript根据这些属性来计算。
请注意“（没有js计算最终x值并设置它）”如何用JS制作 - 我知道。如何做到没有 - 我找不到解决方案。
哦抱歉没看到。我的错。

【解决方案2】：

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

【讨论】：

【解决方案3】：

根据@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>

【讨论】：