使用SVG和Javascript動畫生長/縮小餅圖

我想使用嵌入在HTML中的Javascript和SVG創建不斷增長的餅圖動畫。輸入應該是百分比，輸出應該是一個圖像。它應該動畫這樣的：使用SVG和Javascript動畫生長/縮小餅圖

image description

這應該像GUI鼠標保持動作的反饋（用戶需要長按的東西）。這也是我不能使用GIF動畫的原因，因爲超時時間可能會有所不同。

我試圖在Inkscape中做這個，然後對XML進行逆向工程，但我根本不理解它。還有具有財產d充滿亂碼數字的<path>節點：

d="m 250.78761,446.46564 a 28.183382,28.183382 0 0 1 -24.596,27.95413 28.183382,28.183382 0 0 1 -30.85751,-20.83773"

我認爲這些都是路徑的一些點。但是，我不能僅僅提出一個圈子並提及它的完整程度的百分比嗎？這些點如何產生？

這是我打：

body, html { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    border: 1px solid grey; 
 
    } 
 
svg { 
 
    /** to fit svg in the viewbox**/ 
 
    max-height: 400px; 
 
    border: 1px solid black; 
 
}

<svg class="test" viewBox="-20 -20 1000 1000"> 
 

 
    <path 
 
     id="circle4146" 
 
     style="stroke:#61a4ff;stroke-width:15.00000095;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;" 
 
     sodipodi:type="arc" 
 
     sodipodi:cx="140.71873" 
 
     sodipodi:cy="446.46564" 
 
     sodipodi:rx="28.183382" 
 
     sodipodi:ry="28.183382" 
 
     sodipodi:start="0" 
 
     sodipodi:end="1.1720792" 
 
     sodipodi:open="true" 
 
     d="m 168.90212,446.46564 a 28.183382,28.183382 0 0 1 -17.24157,25.97267" /> 
 
</svg>

的Sodipodi繼續的東西可能使用Inkscape中，改變它沒有任何效果。我知道d屬性描述了複雜路徑。我真正需要的是讓某人突出顯示哪些點應該移動（使用罪與cos我假設）以達到預期的效果。

另外我無法將視口調整到圓圈。顯然有些座標不是X和Y.

來源

2016-02-15 Tomáš Zato

如果您想了解路徑說明是如何工作的，你總是可以只讀取SVG規範。 –

是這樣的嗎？在這裏，我只是計算百分比表示的圓周長度。然後，我給這個圈子一個長度和差距很大的中風衝刺模式。

setCircleTo(70); 
 

 
function setCircleTo(percent) 
 
{ 
 
    // Get the circle element via the DOM 
 
    var circle = document.getElementById('mycircle'); 
 
    // Calculate the circle circumference via the circles 'r' attribute 
 
    var circumference = Math.PI * 2 * circle.r.baseVal.value; 
 
    // Calculate what <percent> of the circumference is 
 
    var adjustedLen = percent * circumference/100; 
 
    // Set the circle's dashpattern one with a dash that length 
 
    circle.setAttribute('stroke-dasharray', adjustedLen+' '+circumference); 
 
}

<svg class="test" viewBox="-20 -20 1000 1000"> 
 

 
    <circle id="mycircle" cx="100" cy="75" r="50" stroke-width="30" fill="none" stroke="#61a4ff"/> 
 

 
</svg>

來源

2016-02-15 18:09:15

哇這是一些聰明的黑客，謝謝。 –

使用SVG和Javascript動畫生長/縮小餅圖

回答

相關問題