问题描述
我想让代码中的 svg 形状向上上升并围绕自身旋转，问题是它们围绕原点中心旋转，通常是 (0,0)。
我尝试使用transform-origin:center，但它采用整个svg的中心，transform-origin:uset将其设置为(0,0)。
然后我使用了蓝色方块中心的坐标并且它起作用了（对它而言），但是，从长远来看，必须计算每个单独路径的中心听起来有点不切实际，所以还有其他方法可以设置它？也许我还没有在 Inkscape 中搜索过设置？
感谢您的关注。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>
svg:hover .shape {
animation: rise 2s;
transform-origin: 130px 230px;
transform: translate(0,-40px) rotate(360deg);
}
@keyframes rise {
0% {
transform: translate(0,0) rotate(0deg);
}
100% {
transform: translate(0,-40px) rotate(360deg);
}
}
</style>
<svg width="210mm" height="297mm" viewBox="0 0 210 300">
<rect
class="shape"
style="fill:#0000ff;stroke-width:0.217849"
id="rect10"
width="60"
height="60"
x="100"
y="200" />
<rect
class="shape"
style="fill:#ff0000;stroke-width:0.264999"
id="rect8"
width="40.065475"
height="52.916664"
x="8.3154764"
y="190.5" />
<rect
class="shape"
style="fill:#ff00ff;stroke-width:0.264999"
id="rect11"
width="60.476189"
height="28.726175"
x="10.583333"
y="258.53571" />
<rect
class="shape"
style="fill:#ffff00;stroke-width:0.264999"
id="rect13"
width="22.678572"
height="38.55357"
x="61.232143"
y="211.66666" />
<rect
class="shape"
style="fill:#ff6600;stroke-width:0.264999"
id="rect15"
width="50.648811"
height="15.119047"
x="154.97023"
y="183.69644" />
<rect
class="shape"
style="fill:#00ff00;stroke-width:0.264999"
id="rect17"
width="23.434523"
height="44.601189"
x="175.38094"
y="226.02975" />
</svg>
</body>
</html>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）