animation - SVG不在中心动画

Question

我不确定我做错了什么，但我无法让这个动画以 SVG 的中心为中心。
https://codepen.io/Alecurtu/pen/jOVobxK

  .st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
  transform-origin: 50% 50%;
}

svg {
  animation: 5s Text infinite;
  transform-origin: 50% 50%;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  animation: spin 4s infinite linear;
}

Answer 1

考虑使用: textPath
在这种情况下，您不需要创建 path对于每个字母。
代码会大大减少，如果以后需要修改文字，那么你只需要修改<text> ... </text>里面的文字即可。

.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  font-size:48px;
  font-weight:bold;
  fill:black;
  letter-spacing:2;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 6s infinite linear;
}

<svg id="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 400 400" >   
    <defs> 
     
      <path id="circ" d="M50 200 A150 150 0 0 1 350 200M350 200 A150 150 0 0 1 50 200" fill="none" stroke="#111111" stroke-width="2" /> 

   </defs>
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
  
 
<g id="Text">
     
       
       
      <text y="-15"   x="10" >
        <textPath   xlink:href="#circ"> datVault.hyz...coming Soon...join waiting list!!
        </textPath> 

      </text>
</g>
</svg>
</div>

你也可以用 <tspan> 将一些文本包围起来。标签:

.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  font-size:46px;
  font-weight:bold;
  fill:black;
  letter-spacing:4;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 6s infinite linear;
}

<svg id="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 400 400" >   
    <defs> 
         <path id="circ" d="M50 200 A150 150 0 0 1 350 200M350 200 A150 150 0 0 1 50 200" fill="none" stroke="#111111" stroke-width="2" /> 
   </defs>
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
  
 
<g id="Text">
     
      
       
      <text y="-15"   x="10" >
        <textPath   xlink:href="#circ"> <tspan style="fill:red">datVault</tspan>.hyz...coming Soon...<tspan style="fill:red"> join</tspan> waiting list!!
        </textPath> 

      </text>
      
     
</g>
</svg>
</div>