创建动画时遇到的问题：CSS转换源和SVG

Question

我正在尝试创建一个过程（逐步地）。

以下代码：

    .cssload-ball{
      position: absolute;
      height: 131px;
      width: 128px;
    	border-radius: 78px;
    	border: 3px solid	rgb(0,0,0);
    	left: 35%;
    	left: calc(50% - 42px);
    	transform-origin: 50% 50%;
      animation: cssload-ball 5s linear;
      background: transparent;
    }
    
    .cssload-ball:after{
    	content: "";
    	position: absolute;
      top: -7px;
      left: 56px;
    	width: 11px;
    	height: 11px;
    	border-radius: 10px;
    	background-color: rgb(0,0,0);
    }
    @keyframes cssload-ball{
    		0%{transform:rotate(0deg);}
    		100%{transform:rotate(360deg);}
    }

<svg width="1100" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
      <g class="layer">
       <title>Layer 1</title>
       
       <!--First Circle -->  
       <g class="cssload-ball" transform="translate(100,100)" > 
       <circle cx="152.31817" cy="103.26276" fill="#000000" fill-opacity="0" id="outterCircle1" r="47.60488" stroke="blue" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="2"/>
       <circle cx="151.01817" cy="54.76275" fill="blue" id="pointCircle1" r="4.90312"  class="" stroke="blue" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
       </g>
       <circle cx="151.88986" cy="101.89601" fill="#000000" id="innerCircle1" r="33.79454" stroke="blue" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="2"/>
       
       <!-- <line fill="none" fill-opacity="0" id="link1" stroke="#cccccc" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" x1="185.81819" x2="313.81816" y1="98.86366" y2="98.86366"/> -->
      
       
       <g id="load1Group">
        <rect class="loading" fill="#000000" height="41" id="loadBox1" stroke="#007f3f" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" width="132" x="89.44446" y="168.94445"/>
        <g class="load1CirleGroup">
         <circle cx="130.94446" cy="190.34445" fill="#7f7f7f" class="load1Circle1" r="4.36607" stroke="#f2f7f4" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
         <circle cx="149.44445" cy="190.34445" fill="#7f7f7f" class="load1Circle2" r="4.36607" stroke="#f2f7f4" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
         <circle cx="167.94446" cy="190.34445" fill="#7f7f7f" class="load1Circle3" r="4.36607" stroke="#f2f7f4" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
        </g>
       </g>
      </g>
     </svg>

transform-origin对我不起作用。谁能告诉我如何实现？

Answer 1

transform-origin中的百分比值在不同的浏览器中给出不同的结果。

如果您只关心最近的浏览器（去年左右），则可以添加transform-box: fill-box以使浏览器的行为相同。

.cssload-ball{
      position: absolute;
      height: 131px;
      width: 128px;
    	border-radius: 78px;
    	border: 3px solid	rgb(0,0,0);
    	left: 35%;
    	left: calc(50% - 42px);
    	transform-origin: 50% 50%;
      transform-box: fill-box;
      animation: cssload-ball 5s linear;
      background: transparent;
    }
    
    .cssload-ball:after{
    	content: "";
    	position: absolute;
      top: -7px;
      left: 56px;
    	width: 11px;
    	height: 11px;
    	border-radius: 10px;
    	background-color: rgb(0,0,0);
    }
    @keyframes cssload-ball{
    		0%{transform:rotate(0deg);}
    		100%{transform:rotate(360deg);}
    }

<svg width="1100" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
      <g class="layer">
       <title>Layer 1</title>
       
       <!--First Circle -->  
       <g class="cssload-ball" > 
       <circle cx="152.31817" cy="103.26276" fill="#000000" fill-opacity="0" id="outterCircle1" r="47.60488" stroke="blue" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="2"/>
       <circle cx="151.01817" cy="54.76275" fill="blue" id="pointCircle1" r="4.90312"  class="" stroke="blue" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
       </g>
       <circle cx="151.88986" cy="101.89601" fill="#000000" id="innerCircle1" r="33.79454" stroke="blue" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="2"/>
       
       <!-- <line fill="none" fill-opacity="0" id="link1" stroke="#cccccc" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" x1="185.81819" x2="313.81816" y1="98.86366" y2="98.86366"/> -->
      
       
       <g id="load1Group">
        <rect class="loading" fill="#000000" height="41" id="loadBox1" stroke="#007f3f" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" width="132" x="89.44446" y="168.94445"/>
        <g class="load1CirleGroup">
         <circle cx="130.94446" cy="190.34445" fill="#7f7f7f" class="load1Circle1" r="4.36607" stroke="#f2f7f4" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
         <circle cx="149.44445" cy="190.34445" fill="#7f7f7f" class="load1Circle2" r="4.36607" stroke="#f2f7f4" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
         <circle cx="167.94446" cy="190.34445" fill="#7f7f7f" class="load1Circle3" r="4.36607" stroke="#f2f7f4" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
        </g>
       </g>
      </g>
     </svg>

或者为了获得更好的结果（包括对旧版浏览器的支持），请改用绝对坐标。

transform-origin: 153px 103px;

.cssload-ball{
      position: absolute;
      height: 131px;
      width: 128px;
    	border-radius: 78px;
    	border: 3px solid	rgb(0,0,0);
    	left: 35%;
    	left: calc(50% - 42px);
    	transform-origin: 153px 103px;
      animation: cssload-ball 5s linear;
      background: transparent;
    }
    
    .cssload-ball:after{
    	content: "";
    	position: absolute;
      top: -7px;
      left: 56px;
    	width: 11px;
    	height: 11px;
    	border-radius: 10px;
    	background-color: rgb(0,0,0);
    }
    @keyframes cssload-ball{
    		0%{transform:rotate(0deg);}
    		100%{transform:rotate(360deg);}
    }

<svg width="1100" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
      <g class="layer">
       <title>Layer 1</title>
       
       <!--First Circle -->  
       <g class="cssload-ball" > 
       <circle cx="152.31817" cy="103.26276" fill="#000000" fill-opacity="0" id="outterCircle1" r="47.60488" stroke="blue" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="2"/>
       <circle cx="151.01817" cy="54.76275" fill="blue" id="pointCircle1" r="4.90312"  class="" stroke="blue" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
       </g>
       <circle cx="151.88986" cy="101.89601" fill="#000000" id="innerCircle1" r="33.79454" stroke="blue" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="2"/>
       
       <!-- <line fill="none" fill-opacity="0" id="link1" stroke="#cccccc" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" x1="185.81819" x2="313.81816" y1="98.86366" y2="98.86366"/> -->
      
       
       <g id="load1Group">
        <rect class="loading" fill="#000000" height="41" id="loadBox1" stroke="#007f3f" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" width="132" x="89.44446" y="168.94445"/>
        <g class="load1CirleGroup">
         <circle cx="130.94446" cy="190.34445" fill="#7f7f7f" class="load1Circle1" r="4.36607" stroke="#f2f7f4" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
         <circle cx="149.44445" cy="190.34445" fill="#7f7f7f" class="load1Circle2" r="4.36607" stroke="#f2f7f4" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
         <circle cx="167.94446" cy="190.34445" fill="#7f7f7f" class="load1Circle3" r="4.36607" stroke="#f2f7f4" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0"/>
        </g>
       </g>
      </g>
     </svg>