現在、州のデータを他の国のデータと比較するプロジェクトに取り組んでいます。1 つのデータ ポイントは保護された土地のパーセンテージであり、データ ポイントに一致する州のパーセンテージを埋めたいと考えています。たとえば、ノースカロライナ州の 25% が保護されている場合、州の 25% を埋める必要があります。現在、svg を使用しようとしていますが、ページの読み込み時に塗りつぶしたいと考えています。
これを行う方法に関する提案やリソースは大歓迎です。
Illustrator で作成した例:
10760 次
4 に答える
2
これは、プレーンな css と html で実行できます: http://jsfiddle.net/haohcraft/rAPN5/1/
基本的にコツは
- フィドルの画像のように、透明な内部フィールドと非透明な外部フィールドを持つ画像が必要です。
z-index:1の上に配置するには、設定する必要がありますfilled <div>。 filled <div>その場合はとを設定しimgますposition: absolute; width:90px; height:90px;。- 次に、
heightのを調整してパーセンテージfilled divを表示できます
于 2014-07-17T03:23:08.253 に答える
2
ここに私の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%」を追加して効果を出し、目的のパーセンテージに達したときにすべての間隔を停止できます。
これが少なくとも手がかりになったことを願っています。
よろしく。
于 2014-02-28T14:04:06.807 に答える
0
さて、これはキャンバスでのかなりばかげた方法です...（そして、内部領域の特定の％を塗りつぶしたいという意味だと思います）。
ステップ 1: 各状態のソリッド イメージを Canvas にダンプする
ステップ 2: 非ゼロ ピクセルの数をカウントする
ステップ 3: エッジ抽出畳み込みを使用してエッジを抽出する
ステップ 4: 各行について、図形内の各行内で水平方向に反復し、描写したい図形の x% に達するまでピクセル単位で色付けします。
SVGでこれを行うことは可能ですが、形状を手でテッセレートし、すべての領域を追跡してから、塗りつぶす領域を手で計算する必要があります。水入れみたいに満タンの状態？
別の解決策は、もちろん、50 州すべての形をした透明な容器を 3D プリントし、色付きの水を必要なレベルまで満たすことです。それらを撮影し、SVG フィルター (feImage + feColorMatrix + feComposite) を介してその画像を操作して、SVG 画像を選択的に塗りつぶします。これは、テッセレーション (またはキャンバス) を学習するよりも速い場合があります。
于 2013-04-09T06:51:11.860 に答える