这是一个代码笔示例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 值并进行设置）
translateX(-???px) 的硬编码不是一个选项，因为可能有许多对象应该被反转。
我在尝试缩放子元素时遇到了转换原点的问题。
在尝试在更大的 svg 中缩放动画框时，它使用来自整个 svg 的变换原点 (0,0)，而不是我尝试缩放的元素的中心。
这使它看起来像是“从左上角飞入”，这不是我想要的。我希望让它从元素中心缩放。
如何相对于我正在设置动画的特定元素设置变换原点，而不必硬编码子元素本身的 (x,y) 位置。
这是我正在处理的问题的一个简单示例
@keyframes scaleBox {
from {transform: scale(0);}
to {transform: scale(1);}
}
#animated-box {
animation: scaleBox 2s infinite;
}<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
width: 195px;
"><defs>
<style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
</defs>
<rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
<path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
<rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>嗨，我有一个齿轮 svg，我正在尝试通过其路径实现旋转动画，但由于某种原因，它没有从中心旋转。正如您在下面的代码片段中看到的那样，我有一个path带 anid outer-1并且我已经应用了一个对其调用的动画rotate，但它没有按预期工作。
.svg {
height: 400px;
width: 400px;
}
#outer-1 {
-webkit-transform-origin: center center;
animation-name:rotate;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate {
from {
-webkit-transform:rotate(0deg) translateZ(0px);
}
to {
-webkit-transform:rotate(360deg) translateZ(0px);
}
}<div class="svg">
<svg viewBox="0 0 816 845" fill="none">
<g id="Layer 2">
<g id="Layer 1">
<path id="outer-2" d="M458.855 639.621C458.856 630.178 462.475 621.074 469.008 614.076C475.541 607.078 484.522 602.687 494.205 601.756C488.616 573.484 476.953 546.671 459.975 523.064C452.496 529.175 442.934 532.355 …