進行內部SVG旋轉

這裏是從我的代碼示例：進行內部SVG旋轉

<div style="width:100%;"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 200"> 
     <svg class="a"> 
      <g> 
       <path class="area1" d="M52,5 A50,50 0 0,1 80,17" style="stroke-width:10; fill:none;" stroke="gray"/> 
       <path class="area2" d="M83,20 A50,50 0 0,1 94.5,48" style="stroke-width:10; fill:none; stroke: gray;"/>      
       <path class="area3" d="M94,52 A50,50 0 0,1 84,80" style="stroke-width:10; fill:none; stroke: gray;"/> 
       <path class="area4" d="M80,83 A50,50 0 0,1 52,95" style="stroke-width:10; fill:none; stroke: gray; "/> 
       <path class="area5" d="M48,95 A50,50 0 0,1 20,83" style="stroke-width:10; fill:none;" stroke="gray"/> 
       <path class="area6" d="M17,80 A50,50 0 0,1 5,52" style="stroke-width:10; fill:none;" stroke="gray"/> 
       <path class="area7" d="M5,48 A50,50 0 0,1 17,20" style="stroke-width:10; fill:none;" stroke="gray"/> 
       <path class="area8" d="M20,17 A50,50 0 0,1 48,5" style="stroke-width:10; fill:none;" stroke="gray"/> 
      </g> 
     </svg> 
     <svg x="80" y="80"> 
      <g> 
      <path class="area1" d="M52,5 A50,50 0 0,1 80,17" style="stroke-width:10; fill:none;" stroke="gray"/> 
      <path class="area2" d="M83,20 A50,50 0 0,1 94.5,48" style="stroke-width:10; fill:none; stroke: gray;"/>      
      <path class="area3" d="M94,52 A50,50 0 0,1 84,80" style="stroke-width:10; fill:none; stroke: gray;"/> 
          <path class="area4" d="M80,83 A50,50 0 0,1 52,95" style="stroke-width:10; fill:none; stroke: gray; "/> 
      <path class="area5" d="M48,95 A50,50 0 0,1 20,83" style="stroke-width:10; fill:none;" stroke="gray"/> 
      <path class="area6" d="M17,80 A50,50 0 0,1 5,52" style="stroke-width:10; fill:none;" stroke="gray"/> 
      <path class="area7" d="M5,48 A50,50 0 0,1 17,20" style="stroke-width:10; fill:none;" stroke="gray"/> 
      <path class="area8" d="M20,17 A50,50 0 0,1 48,5" style="stroke-width:10; fill:none;" stroke="gray"/> 
     </g> 
     </svg> 
    </svg> 
</div>

而CSS：

.a { 
    -webkit-animation-duration: 6s; 
    -webkit-animation-iteration-count: 6; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-name: ckw; 
}

我試圖讓孩子SVG的旋轉，但它不工作。如果我把父類svg放在同一個類上，它會旋轉，但不是我想要的方式。任何幫助將不勝感激。

在此先感謝。

來源

2015-02-09 Wolf

首先..我會清理代碼;）然後添加animateTransform到circle你想旋轉。

乾杯！

.circle { 
 
    stroke: gray; 
 
    stroke-width: 10; 
 
    stroke-dasharray: 10; 
 
    fill: transparent; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 200"> 
 
    
 
    <circle class="circle" cx="40" cy="40" r="35"> 
 
    <animateTransform 
 
     attributeName="transform" 
 
     begin="0s" 
 
     dur="6s" 
 
     type="rotate" 
 
     from="0 40 40" 
 
     to="360 40 40" 
 
     repeatCount="indefinite" 
 
    /> 
 
    </circle> 
 
    
 
    <circle class="circle" cx="100" cy="100" r="35"/> 
 
    
 
</svg>

來源

2015-02-09 11:10:37

進行內部SVG旋轉

回答

相關問題