現在、私は、状態データと他の国のデータを比較しているプロジェクトに取り組んでいます。 1つのデータポイントは保護された土地のパーセンテージであり、データポイントと一致する州のパーセンテージを記入したいと思います。たとえば、ノースカロライナ州の25％が保護されている場合、私は州の25％を埋めるようにします。現在、私はsvgを使用しようとしています。SVGのパーセンテージを入力して塗りつぶしを
どのようにこれを行うには、どのような提案やリソースをいただければ幸いです。
例は、私はイラストレーターに策定：
さて、ここで...キャンバスではかなり間抜けな方法です（と私はあなたが満たされた内部領域の特定％をしたい意味と仮定しています） 。
ステップ1：キャンバスに各状態のベタ画像をダンプ
ステップ2：非ゼロピクセル
ステップ3の数を数える：エッジ抽出畳み込み
ステップ4を用いてエッジを抽出します：各行について、シェイプ内の各行内を水平方向に繰り返し、描画するシェイプのx％に達するまでピクセル単位で色分けします。
SVGでこれを行うことはできますが、シェイプを手作業で整理し、すべての領域を追跡し、塗りつぶすように手作業で計算する必要があります。それは水の容器のように状態を埋めることですか？
代替の解決策は、もちろん、すべての50州の形状の3D印刷透明容器に、着色水で所望のレベルまで塗りつぶすことです。それらを撮影し、その画像をSVGフィルタ（feImage + feColorMatrix + feComposite）で操作して、SVG画像を選択的に塗りつぶします。これは、テッセレーション（またはキャンバス）を学ぶよりも速いかもしれません。ここで
は私の2セントです：
あなたはこのような直線勾配を持つことができます。
<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％」を追加して効果を作り、希望の割合に達するとすべての間隔を停止します。
これは少なくともあなたに手がかりを与えてくれることを願っています。
よろしくお願いいたします。
これはプレーンCSSとHTMLで行うことができます。基本的には、トリックは次のようにあなたは、透明内側のフィールドが、 非透明の外場を持っているイメージが必要
フィドルの画像。そして はfilled <div>の上に置くためにz-index:1に設定する必要があります。
filled <div>とimgをposition: absolute; width:90px; height:90px;に設定します。示すことfilled divのheightを調整することができます。 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
これはあなたにコードを書くよう人々に依頼するサイトではありません –
@CodyGuldner私はコードを探していません。私は、国家のパーセンテージへの塗りつぶしに成功するために何らかの方法でインターネットを精練してきました。私はちょうど正しい方向に私を向ける誰かが必要です。コードを書く必要はありません。 –
私は、ほとんどの場合、部分塗りではなく状態データの色分けを見ています。私は部分充満がすぐに理解するのが難しいと感じるでしょう。ちょっと言って.... – markE