为什么蓝色圆圈未在其中心旋转 [英] 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屋！