Question

为什么蓝色圆圈没有在其自身轴线的中心旋转？在下面可以找到我以前的代码。

在这里您可以看到与 SVG 成比例的 CSS ：

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>

Answer 1

您需要transform-box：填充框；

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>

Answer 2

由于SVG中的比例不同，因此使X和Y轴上的比例变为比例。另外，它缩放“ cx”和“ cy”属性。最好的方法是将“ cx”和“ cy”设置为0，然后使用“ translate”进行协调

 <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="0" cy="0" r="3" fill="blue" transform="translate(40 105)">
    		<animateTransform 
                     attributeName="transform"
    				 type="scale" 
    				 additive="sum" 
    				 from="1 1" 
    				 to="1 1" 
    				 values="1 1; 0.5 0.5; 1 1" 
    				 begin="0s" 
    				 dur="2s" 
    				 repeatCount="indefinite">
    			
    		</animateTransform>
    	</circle>	
    </svg>

享受！

为什么蓝色圆圈未在其中心旋转

2 个答案: