SVG.使用CSS反转图像.将图片放在同一位置

问题描述

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

Here is a codepen example 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值并进行设置)

Arrow is reversed. Stay at same place. Do it only based on css (without js calculating final x-value and setting it up)

translateX(-??? px)的硬代码不是一个选择，因为可能有许多对象应该颠倒.

hardcode for translateX(-???px) is not an option, because there could be many objects which should be reversed.

推荐答案

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

Use transform-origin and 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>

这篇关于SVG.使用CSS反转图像.将图片放在同一位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！