SVG選擇彩色地圖

Question

我正在js的遊戲中工作。這是一場戰爭遊戲。 如果我懸停在一個國家/選擇是給出了邊界和顏色，但我想，如果我擁有自己的國家，它有自己的顏色。 如果您選擇一個國家並點擊左邊的「selecteren」，您可以看到它。 選擇美國，巴西，俄羅斯，中國，加拿大和印度以外的國家。 然後，它有一個綠色的邊界，但我希望該國採取。一個國家的http://w0w.eu

HTML代碼：

<g data-name="indonesia"> 
<path id="kalimantan" d="M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4z"/> 
<path id="sumatra" d="M722.48,317.57l-0.28,2.28l6.79,11.41h1.98l14.15,23.67l5.66,0.57l2.83-8.27l-4.53-2.85l-0.85-4.56L722.48,317.57L722.48,317.57z"/> 
<path id="java" d="M753.17,358.32l-2.75,1.88l0.59,1.58l8.75,1.98l4.42,0.79l1.87,1.98l5.01,0.4l2.36,1.98l2.16-0.5l1.97-1.78l-3.64-1.68l-3.14-2.67l-8.16-1.98L753.17,358.32L753.17,358.32z"/> 
<path id="bali" d="M781.77,366.93l-2.16,1.19l1.28,1.39l3.14-1.19L781.77,366.93L781.77,366.93z"/> 
<path id="lombok" d="M785.5,366.04l0.39,1.88l2.26,0.59l0.88-1.09l-0.98-1.49L785.5,366.04L785.5,366.04z"/> 
<path id="sumba" d="M790.91,370.99l-2.75,0.4l2.46,2.08h1.96L790.91,370.99L790.91,370.99z"/> 
<path id="flores" d="M791.69,367.72l-0.59,1.19l4.42,0.69l3.44-1.98l-1.96-0.59l-3.14,0.89l-1.18-0.99L791.69,367.72L791.69,367.72z"/> 
<path id="timor" d="M806.14,368.42l-5.11,4.26l0.49,1.09l2.16-0.4l2.55-2.38l5.01-0.69l-0.98-1.68L806.14,368.42L806.14,368.42z"/> 
<path id="sulawesi" d="M789.53,349.11l2.26,2.77l-1.47,4.16v0.79h3.34l1.18-10.4l1.08,0.3l1.96,9.5l1.87,0.5l1.77-4.06l-1.77-6.14l-1.47-2.67l4.62-3.37l-1.08-1.49l-4.42,2.87h-1.18l-2.16-3.17l0.69-1.39l3.64-1.78l5.5,1.68l1.67-0.1l4.13-3.86l-1.67-1.68l-3.83,2.97h-2.46l-3.73-1.78l-2.65,0.1l-2.95,4.75l-1.87,8.22L789.53,349.11L789.53,349.11z"/> 
<path id="maluku" d="M814.19,330.5l-1.87,4.55l2.95,3.86h0.98l1.28-2.57l0.69-0.89l-1.28-1.39l-1.87-0.69L814.19,330.5L814.19,330.5z"/> 
<path id="seram" d="M819.99,345.45l-4.03,0.89l-1.18,1.29l0.98,1.68l2.65-0.99l1.67-0.99l2.46,1.98l1.08-0.89l-1.96-2.38L819.99,345.45L819.99,345.45z"/> 
<path id="west papua" d="M831.93,339.34l-4.17,0.47l-2.68,1.96l1.11,2.24l4.54,0.84v0.84l-2.87,2.33l1.39,4.85l1.39,0.09l1.2-4.76h2.22l0.93,4.66l10.83,8.96l0.28,7l3.7,4.01l1.67-0.09l0.37-24.72l-6.29-4.38l-5.93,4.01l-2.13,1.31l-3.52-2.24l-0.09-7.09L831.93,339.34L831.93,339.34z"/> 

CSS代碼：

path:hover{ 
fill: #E2E2E2!important; 
stroke-width: 1px; 
stroke: #2B2B2B; 
} 

g.selected{ 
stroke-width: 1px; 
stroke: #2B2B2B; 
fill: #D2D2D2!important; 
} 
path[data-owned=true]{ 
fill: #D2D2D2!important; 
stroke-width: 1px; 
stroke: #3FDA4E; 

} 
g[data-owned=true]{ 
fill: #D2D2D2!important; 
stroke-width: 1px; 
stroke: #3FDA4E; 

}

this.addCountry  = function(country){ 
    if(this.countries.indexOf(country) >= 0){ 
     alert("You already own this country"); 
     return false; 
    } 
    this.countries.push(country); 
    $("g[data-name='"+country+"']").first().attr("data-owned", "true"); 
} 

Answer 1

在JavaScript的時候你標記的國家作爲「流內德」，如果你設置的路徑的填充，應立即停止服從：懸停選擇，如：

obj.style.fill = "#D2D2D2"; 

例子：http://iqgames.gjsite.com/，一個國家爲綠色或紅色後，不再有懸停顏色。

更新：非常確定這是因爲！在你的CSS重要。如果我將它添加到上面引用的頁面中的路徑選擇器中，它與您的行爲具有相同的行爲。

爲了澄清，這是我想嘗試：

1. 重新思考你的CSS規則的邏輯，以避免使用任何東西，你將使用JavaScript來修改重要的！
2. 在您的腳本中，當您將國家分配爲「擁有」時，除了更改類和數據屬性之外，還可以使用document.getElementById直接修改填充/描邊。

另請參見：請注意，jQuery不完全支持svg。