CSS変換と遷移を使ったSVGのアニメーション

Question

私はこのSVGアニメーションに助けが必要です。

アニメーションのドーナツチャートがあります。茶色の部分は、インフォグラフィックと同様に、回転して空間を埋めるようになっています。

問題は、茶色の部分はグラフの半分に過ぎず、メインの図表の下に隠れていて、図表を「塗りつぶす」ように回転しますが、グラフの50％を超えることはできませんそれは再び隠されるからです。

あなたはsvgのローテーションで遊んでいるともっと理解できます。

Illustratorでコード/ SVGを変更する方法に関するアドバイスや解決策はありますか？ （私は、XMLのゼロ知識を持っているので、私はXMLコードは何を意味するかを知ることはできません。）

<figure> 

<path id="right" class="st0" d="M196.8,0l-0.4,55.7c74.6,0.5,134.9,61.1,134.9,135.8c0,75-60.8,135.8-135.8,135.8 
         c-0.3,0-0.6,0-0.9,0l-0.4,55.7c0.4,0,0.8,0,1.2,0C301.3,383,387,297.3,387,191.5C387,86.2,302,0.7,196.8,0z"/> 
    <path id="left-bottom" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0 
         C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/> 
    <path id="left-top" class="st0" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0      C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/> 
      </svg> 

トライアウト：このようなhttp://codepen.io/anon/pen/QdMrBY

Answer 1

何か？

#ring 
 
{ 
 
    width: 20%; 
 
} 
 

 
#right 
 
{ 
 
    
 
} 
 

 
#left-top 
 
{ 
 
    
 
} 
 

 
#left-bottom 
 
{ 
 
    fill: maroon; 
 
    transform: rotate(180deg); 
 
    transform-origin: 100% 50%; 
 
    transition: 1s; 
 
} 
 

 
#ring { 
 
    animation: spin infinite 10s linear; 
 
} 
 

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

<figure> 
 
    <svg version="1.1" id="ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 390.5 383" style="enable-background:new 0 0 390.5 383;" xml:space="preserve"> 
 
      
 
     <path id="right" class="st0" d="M196.8,0l-0.4,55.7c74.6,0.5,134.9,61.1,134.9,135.8c0,75-60.8,135.8-135.8,135.8 
 
          c-0.3,0-0.6,0-0.9,0l-0.4,55.7c0.4,0,0.8,0,1.2,0C301.3,383,387,297.3,387,191.5C387,86.2,302,0.7,196.8,0z"/> 
 
     <path id="left-bottom" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0 
 
          C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/> 
 
     <path id="left-top" class="st0" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0      C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/> 
 
       </svg> 
 

 
</figure>