Here is a codepen example 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:
Arrow moves from its position
Expected:
Arrow is reversed. Stay at same place. Do it only based on css (without js calculating final x-value and setting it up)
PS:
hardcode for translateX(-???px) is not an option, because there could be many objects which should be reversed.