使用CSS的動態熱圖像？

Question

我有一個插圖製作的插圖。 這是一個具有6個特定點的靜態熱圖像，我希望進行動畫顯示（根據溫度明顯）。

例如，我會更新一個JSON文件，根據該文件，圖像會自動更新：

{ 
    "sensors": [ 
    { 
     "name": "top", 
     "value": 0 
    }, 
    { 
     "name": "middle", 
     "value": 3 
    }, 
    { 
     "name": "bottom", 
     "value": 1 
    } 
    ] 
} 

這也將需要更新圖像旁邊的傳說（不顯示）。

類似this video，但質量更高。

我正在考慮在CSS中這樣做，但我不知道如何處理自定義形狀，因爲插圖不是正方形，並且徑向漸變（like this post）在圖像上呈現時看起來不漂亮。

我可能會考慮的任何其他技術解決方案？

Answer 1

IMO你最好的選擇是：

• 使用SVG，這是二維圖形與交互性和動畫支持可縮放矢量圖形格式。使用JavaScript動態更改您的插圖畫家;你也可以看看動畫GSAP或數據驅動可視化D3.js。

• 使用HTML5 Canvas，它用於通過JavaScript動態繪製圖形（位圖格式）。

在這種特殊情況下，CSS不能勝任工作IMO，因爲設計複雜的多點形狀並不是真正的用例。