我试图SVG path从它的中心旋转一个，但它不起作用
a {
width: 40px;
height: 40px;
width: 40px;
font-size: 1.5rem;
padding: 1px;
overflow: hidden;
border: 1px solid black;
}
a:hover path {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
a path {
transition: all .5s ease-in-out;
transform-origin: center center;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<a href="#" class="rounded-circle" data-toggle="tooltip" data-placement="left" title="Twitter" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="-250 -150 1000 1000" height="40px" width="40px">
<path fill="#007bff" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 …这是一个代码笔示例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>