![reversed]( "reversed")
本文介绍了SVG.使用 css 反转图像.将图像保持在同一位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是一个代码笔示例 https://codepen.io/yury-leonov/pen/rZxxQE
示例代码:
$(".example").on("click", function(e){$(e.target).toggleClass("reverse");})
.reverse{变换: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 值可以在一段时间内改变--></svg>
问题:
箭头从其位置移动
预期:
箭头反转.留在同一个地方.仅基于 css 执行(无需 js 计算最终 x 值并进行设置)
附注:
translateX(-???px) 的硬编码不是一个选项，因为可能有许多对象应该被反转.
解决方案
使用transform-origin和transform-box
$(".example").on("click", function(e){$(e.target).toggleClass("reverse");})
.reverse{变换: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 值可以在一段时间内改变--></svg>
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.
解决方案
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 反转图像.将图像保持在同一位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！