SVG.使用 css 反转图像.将图像保持在同一位置 [英] SVG. Reverse image using css. Keep image at the same place

问题描述

这是一个代码笔示例 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-b​​ox

$(".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 反转图像.将图像保持在同一位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！