填寫一個SVG的百分比並爲填充動畫

目前，我正在開發一個項目，該項目將狀態數據與來自其他國家/地區的數據進行比較。一個數據點是受保護土地的百分比，我想填充與數據點匹配的狀態百分比。舉例來說，如果北卡羅萊納州25％的人受到保護，那麼我希望25％的州能夠填補。目前，我正在嘗試使用svg，並希望在頁面加載時發生填充。填寫一個SVG的百分比並爲填充動畫

如何做到這一點的任何建議或資源將不勝感激。

例子我在Illustrator擬定了：

NC filled in 33%

來源

2013-04-08 hi_Matt

這不是一個網站，你問人們爲你寫代碼 – 2013-04-08 18:21:48

@CodyGuldner我不是在尋找代碼。我一直在搜索互聯網，以某種方式成功地將填充動畫製作成一定比例的狀態，而不能。我只需要有人指點我正確的方向。無需編寫代碼。 – 2013-04-08 18:28:03

我幾乎總是看到狀態數據的顏色編碼，而不是部分填充。我會發現部分填充很難快速理解。只是說.... – markE 2013-04-08 20:40:47

嗯，這裏是在畫布非常愚蠢的方式......（我假設你的意思是你要填寫的內部區的某個％）。

步驟1：轉儲每個狀態的實心圖像到帆布

步驟2：計數非零像素

步驟3的數量：使用邊緣提取卷積

步驟4提取的邊緣：對於每一行，在形狀內的每一行內水平迭代，以像素着色，直到達到想要描繪的形狀的x％。

在SVG中可以做到這一點，但是您需要手工鑲嵌形狀，跟蹤所有區域，然後手動計算填充的區域，並且它不會做我認爲您想要的 - 這是是否有一個國家像一個水容器填滿？

當然，另一種解決方案是3D打印所有50個州的透明容器，並用彩色水填充到所需的水平。拍攝它們，然後通過SVG濾鏡（feImage + feColorMatrix + feComposite）處理該圖像以選擇性地填充SVG圖像。這可能比學習tesselation（或Canvas）更快。

來源

2013-04-09 06:51:11

這裏是我的兩分錢：

你可以有這樣的線性漸變：

<linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="F1g"><stop stop-color="#00FF00" offset="0%" id="F1gst1"/><stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/></linearGradient>

然後在第一個止動元件：

var firstStop = document.getElementById('F1gst1');

然後分配百分比你要填寫的屬性偏移量：

percentage = '35%'; firstStop.setAttribute('offset',percentage);

這就是在JavaScript中的方式。每個狀態都需要一個漸變（你可以使用一個組），也許你需要定義一個路徑對象，並在每個狀態下用相同的表單填充，這樣你可以將線性漸變應用到該路徑填充屬性。

如果您需要動畫，您可以設置一個setInterval，並且每x毫秒添加一個'1％'以生成該效果，並在達到所需的百分比時停止每個間隔。

我希望這至少給你一個線索。

問候。

來源

2014-02-28 14:04:06 Chatyeux

這可以通過簡單的CSS和HTML來完成：http://jsfiddle.net/haohcraft/rAPN5/1/

基本上，訣竅是

需要具有透明內部場但非透明的外部領域的圖像，如在小提琴中的圖像。而你需要設置z-index:1爲了把它放在filled <div>之上。
在這種情況下，將filled <div>和img設置爲position: absolute; width:90px; height:90px;。
然後你就可以調整filled div的height展現百分比

來源

2014-07-17 03:23:08 haohcraft

進度看起來很有希望，使用方便： https://kimmobrunfeldt.github.io/progressbar.js/

這裏是一個不錯的小提琴例如： https://jsfiddle.net/kimmobrunfeldt/72tkyn40/

Javascript：

// [email protected] version is used 
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ 

var bar = new ProgressBar.Circle(container, { 
    color: '#aaa', 
    // This has to be the same size as the maximum width to 
    // prevent clipping 
    strokeWidth: 4, 
    trailWidth: 1, 
    easing: 'easeInOut', 
    duration: 1400, 
    text: { 
    autoStyleContainer: false 
    }, 
    from: { color: '#aaa', width: 1 }, 
    to: { color: '#333', width: 4 }, 
    // Set default step function for all animate calls 
    step: function(state, circle) { 
    circle.path.setAttribute('stroke', state.color); 
    circle.path.setAttribute('stroke-width', state.width); 

    var value = Math.round(circle.value() * 100); 
    if (value === 0) { 
     circle.setText(''); 
    } else { 
     circle.setText(value); 
    } 

    } 
}); 
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif'; 
bar.text.style.fontSize = '2rem'; 

bar.animate(1.0); // Number from 0.0 to 1.0

來源

2018-02-24 07:21:06 Jan

填寫一個SVG的百分比並爲填充動畫

回答

相關問題