帶有SVG標誌的動畫半圓

我想在SVG中製作此圖形。我可以使用<animate>標記，我可以使用JavaScript處理SVG文檔。如果可能，我寧願在SVG中完成所有工作。帶有SVG標誌的動畫半圓

enter image description here

2014-02-26 Sean Clark Hess

你有多遠？ –

研究看起來像我將不得不通過手動畫路徑數據中的弧線... http://jbkflex.wordpress.com/2011/07/28/creating-a-svg-pie-chart-html5/ –

I不這麼認爲，你應該可以爲此使用SMIL。動畫弧路徑的stroke-dasharray屬性。 –

這裏有一個簡單的例子：

<svg height="200" width="200" viewBox="0 0 144 144"> 
    <circle cx="72" cy="72" r="49" stroke-width="6" stroke="#F68524" fill="none"/> 
    <circle cx="72" cy="72" r="49" 
     stroke-width="6" stroke="#838588" fill="none"> 
     <animate attributeName="stroke-dasharray" values="154 0;0 154" dur="1s" repeatCount="indefinite"/> 
    </circle> 
</svg>

要用於stroke-dasharray正確的值是基於圓的周長，2 * π * r，我們希望將其中的一半除以2.在計算大致爲154的示例中。

請參閱jsfiddle。

更新： 相當接近，但不完全相同，如上所述。這裏有一個版本，也是動畫的顏色：

<svg height="200" width="200" viewBox="0 0 144 144"> 
    <circle cx="72" cy="72" r="49" stroke-width="6" stroke="#F68524" fill="none"> 
     <animate attributeName="stroke" values="#838588;#F68524" 
       dur="2s" calcMode="discrete" repeatCount="indefinite"/> 
    </circle> 
    <circle cx="72" cy="72" r="49" 
     stroke-width="6" stroke="#838588" fill="none"> 
     <animate attributeName="stroke-dasharray" values="154 0;0 154" 
       dur="1s" repeatCount="indefinite"/> 
     <animate attributeName="stroke" values="#F68524;#838588" 
       dur="2s" calcMode="discrete" repeatCount="indefinite"/> 
    </circle> 
</svg>

見jsfiddle。

來源

2014-02-28 14:45:14

哇，真是太棒了，我不明白它在做什麼，這些值代表什麼？請注意，你的例子不是很好，當它循環時不應該有閃光，它應該平滑地開始傳播灰色而不是橙色。 –

這僅僅是一個起點的想法。然後，您可以應用蒙版來隱藏和顯示圖形的某些部分。

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
    <circle cx="200" cy="200" r="100" fill="gray"/> 
    <rect x="100" y="200" height="101" width="201" fill="white"> 
     <animateTransform attributeName="transform" 
      attributeType="XML" 
      type="rotate" 
      from="0 200 200" 
      to="360 200 200" 
      dur="5s" 
      repeatCount="indefinite"/> 
    </rect> 
    <circle cx="200" cy="200" r="90" fill="white"/> 
</svg>

來源

2014-02-26 16:42:24 helderdarocha

非常感謝@helderdarocha指出我在正確的方向。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="144px" height="144px" viewBox="0 0 144 144" enable-background="new 0 0 144 144"> 

    <defs> 
     <clipPath id="rotation-top" clip-path="url(#top-half)"> 
      <rect x="0" y="72" height="72" width="144"> 
       <animateTransform attributeName="transform" 
        attributeType="XML" 
        type="rotate" 
        from="360 72 72" 
        to="0 72 72" 
        dur="3s" 
        repeatCount="indefinite"> 
       </animateTransform> 
      </rect> 
     </clipPath> 
     <clipPath id="rotation-bottom" clip-path="url(#bottom-half)"> 
      <rect x="0" y="0" height="72" width="144"> 
       <animateTransform attributeName="transform" 
        attributeType="XML" 
        type="rotate" 
        from="360 72 72" 
        to="0 72 72" 
        dur="3s" 
        repeatCount="indefinite"> 
       </animateTransform> 
      </rect> 
     </clipPath> 
     <clipPath id="top-half"> 
      <rect x="0" y="0" height="72" width="144"> 
      </rect> 
     </clipPath> 
     <clipPath id="bottom-half"> 
      <rect x="0" y="72" height="72" width="144"> 
      </rect> 
     </clipPath> 
    </defs> 

    <!-- background white --> 
    <circle opacity="0.56" fill="#FFFFFF" cx="72" cy="72" r="72"/> 

    <!-- back gray color --> 
    <circle cx="72" cy="72" r="49" stroke-width="6" stroke="#838588" fill-opacity="0.0"/> 

    <!-- foreground orange color --> 
    <circle 
     cx="72" cy="72" r="49" 
     stroke-width="6" stroke="#F68524" fill-opacity="0.0" 
     clip-path="url(#rotation-bottom)" 
    /> 

    <circle 
     cx="72" cy="72" r="49" 
     stroke-width="6" stroke="#F68524" fill-opacity="0.0" 
     clip-path="url(#rotation-top)" 
    /> 

</svg>

來源

2014-02-26 17:50:18

哇。看起來很棒！將您的答案標記爲正確的答案。 – helderdarocha

我再也不能兩天了：（ –

對於跨瀏覽器動畫，最好使用Javascript。（IE不支持SMIL）。在所有瀏覽器中，setInterval都相當健壯。

例如，不間斷的旋轉的元素，你可以使用：

function basicRotate() 
{ 
    var FPS=100 //----frames per second--- 
    var angle = 0//---starting value--- 
    function frame() 
    { 
     angle++ 
     myElement.setAttribute("transform","rotate("+angle+" "+centetX+" "+centerY+")") 
     if (angle == 360) 
     angle=0 
    } 
    //---start interval timer--- 
    var iT = setInterval(frame, 1000/FPS) //---draw every 10ms --- 
}

來源

2014-02-26 22:23:02

帶有SVG標誌的動畫半圓

回答

相關問題