为什么蓝色圆圈未在其中心旋转 [英] Why is blue circle not spinning in the center of itself
本文介绍了为什么蓝色圆圈未在其中心旋转的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
为什么蓝色圆圈没有在其自身轴线的中心旋转?您可以在下面找到我以前的代码.
Why is the blue circle not rotating in the center of its own axis? Below you can find my previous code.
在这里您可以看到带有 SVG 比例的我的 CSS :
Here you can see my CSS with the proportionate SVG:
circle {
animation: grow 2s infinite;
transform-origin: center;
}
@keyframes grow {
0% {
transform: scale(1);
}
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
<svg xmlns="http://www.w3.org/2000/svg"
width="80"
height="110"
version="1.1">
<rect width="70"
height="100"
x="5"
y="5"
fill="white"
stroke="red"
stroke-width="10"
rx="5"/>
<circle cx="40" cy="105" r="3" fill="blue"/>
</svg>
推荐答案
您需要变换框:填充框;
circle {
animation: grow 2s infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes grow {
0% {
transform: scale(1);
}
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
<svg
xmlns="http://www.w3.org/2000/svg"
width="80"
height="110"
version="1.1"
>
<rect
width="70"
height="100"
x="5"
y="5"
fill="white"
stroke="red"
stroke-width="10"
rx="5"
/>
<circle cx="40" cy="105" r="3" fill="blue" />
</svg>
这篇关于为什么蓝色圆圈未在其中心旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文