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

这样的东西？

＆＃13;

#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); }
}

＆＃13;

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

＆＃13;

使用CSS转换动画SVG并转换

1 个答案: