從javascript編輯SVG樣式

Question

我有一個世界的SVG地圖，我想通過改變svg中每個區域的樣式屬性，通過各種度量實時着色每個區域。 EG我想爲英國藍色着色以反映即將到來的託利勝利（ahem）。

這需要動態，因爲數據經常變化並被推送到瀏覽器。

Answer 1

您可以將CSS樣式應用於SVG元素。不用說，這需要適當的標記。因此，舉例來說，如果你的地圖看起來像（非常簡單的:-)

<svg> 
    <g id="USA">...</g> 
    <g id="UK">...</g> 
</svg> 

你可以簡單地做到以下幾點：

var country = document.getElementById("UK"); 
country.setAttribute("style", "fill: blue; stroke: black"); 

當然，也可以嵌入到樣式的SVG文件：

<svg> 
    <defs> 
    <style type="text/css"> 
     <![CDATA[ 
     // insert CSS rules here 
     ]]> 
    </style> 
    </defs> 
</svg> 

最後，還可能包括一個外部樣式表到SVG文件：

<?xml version="1.0" standalone="no"?> 
<?xml-stylesheet href="style.css" type="text/css"?> 
<svg> 
    ... 

你不想改變整體風格

Answer 2

我的情況下，你可以這樣做：

var country = document.getElementById("UK"); 
country.style.fill = "blue"; 
country.style.stroke = "black";