今天在寫頁面的時候遇到一個不是很好畫的頁面, 關(guān)于記錄簽到記錄, 這里運用svg解決了這個問題, 拿出來分享一下;
首先先讓UI設(shè)計師將"簽到記錄"那部分圖片生成svg格式, 直接在html結(jié)構(gòu)里展示svg, 圖片中每一塊分成了一個g標簽, g里面包含了每塊的path, 只需在交互時(g支持click事件)修改當前g標簽下的path的fill的顏色即可, 接下來就可以實現(xiàn)想要的效果;? 注意:g和圖片的每一塊有時不是按順序?qū)?yīng)的;
頁面樣式
附上簡單的demo:?demo?(由于時間問題, 沒有做對應(yīng), 這里只是說一下遇見這種頁面解決的思路);
