使用HTML5和CSS3可以實現矢量圖像的動態着色嗎？

Question

這就是我想要實現的。我有一個圖像 - 加利福尼亞州的大綱。

我想改變此圖像的顏色動態和編程方式基於一個值。

是否可以使用HTML5/CSS3/Javascript來實現這個功能？ 在更大的計劃中，我打算擁有整個地圖 - 只是一個空白輪廓。通過將每個狀態視爲一個對象，用動態顏色填充每個狀態。

編碼提示和樣本非常感謝。

Answer 1

試着看看SVG，你可以用js來控制它。這裏好的庫爲它svgweb

download上，你會看到按鈕「改變顏色」頂此lib和運行文件/samples/javascript-samples/helloworld.html存檔我認爲這正是你所需要

Answer 2

如果您將輪廓作爲矢量點（而不是圖像），則將其呈現爲HTML5對象，根據需要進行填充和勾勒會很簡單。

見https://developer.mozilla.org/en/canvas_tutorial

Answer 3

與SVG，其中有一個DOM可以用常規的DOM存取功能操作（你可以在你的HTML5嵌入它），或者如果它只是一個，使用圖像要麼做有一個白色的背景和透明的狀態，所以你可以通過CSS改變圖像的背景顏色（雖然我認爲這對你的情況並不是很有用）。 畫布對我來說看起來像是一種矯枉過正，它的支持並不是最好的而不是SVG。

Answer 4

Take a look at this puppy。我已經看到了它作爲原始SVG 和一個HTML頁面中，而功能保持不變... Here's the same "Map Game" as a raw SVG ...

基礎DOCTYPE是SVG/XML擔任image/svg+xml和交互包含全部的<![CDATA[的JavaScript塊中。隨着形狀DEFS，排版，以及SVG命名空間內的造型......

在特定<g>發現關鍵事件處理程序這兩個謊言之間的橋樑， <path>等XML元素描述符......如<path id="Oklahoma" onclick="Check(evt)" onmouseover="On(evt)" onmouseout="Off(evt)" d="M 3....等

這只是一個靜態的截圖，但你可以看到，它擔負着非常相似對特定的項目......

也就是說，而且我做了離題，但是有關SVG最佳實踐的複雜而矛盾的信息數量......我嚴格地責怪微軟和Adobe之間的一個薄弱的共謀 - 一個悲傷的企圖阻礙這個特定的標準 - 以及供應商由於成爲「一般」部署的可行選擇而產生的不可知論革命。已經過去了10年，並且進步的勢頭s正在撕裂他們的操縱性，拖着腳的鞋底！跟上SVG的步伐 - 不要被插件和後備干擾分散注意力...向前發展，並且知道這個標準是平臺鎖定內容創作的死亡...