Animating a SVG with CSS transform and transition

Question

I need help in this SVG animation I'm doing.

It features a doughnut chart animating. The maroon-colored part is supposed to rotate and fill up the space, similar to a infographic.

The problem is, the maroon-colored part is only half of the chart and it is hidden under the main chart, which then rotate to 'fill up' the chart but it cannot go any further than 50% of the chart because it then gets hidden again.

You'll understand more when playing with the rotation of the svg.

Any advice/solution to how I can alter my codes/SVG in Illustrator? (I have zero knowledge on XML so I wouldn't know what the XML codes mean.)

 <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>

Tryout: http://codepen.io/anon/pen/QdMrBY

score 0 · Answer 1 · answered Jan 25 '17 at 13:27

Something like this?

#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>

Sorry but that's not what I meant. I meant the maroon part will always be at 50% of the chart but I need help to make it longer than what it is... like... 70%, 80% or even 90%. — Levin, Jan 25 '17 at 13:34
Oh I got, but I think that what you're wanting could not be done just with CSS, because you need to modify the shape after all. Take a look at [this post](http://stackoverflow.com/questions/5638431/modify-a-svg-file-using-jquery). This is a very very good question and I would really like to see a solution — Facundo La Rocca, Jan 25 '17 at 13:59
Thank you! You saved me from a wild goose chase. I'll explore my options further. Thanks again! — Levin, Jan 25 '17 at 14:28

Animating a SVG with CSS transform and transition

1 Answers1