javascript - SVG 选择颜色贴图

Question

我正在用 js 开发游戏。这是一场 war 游戏。如果我将鼠标悬停在一个国家/选择上，则会给出一个边框和一种颜色，但我想要，如果我拥有这个国家，它就会有自己的颜色。如果您选择一个国家并单击左侧的“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 中，如果您设置路径的填充，它应该停止服从 :hover 选择器，例如:

obj.style.fill = "#D2D2D2";

示例:http://iqgames.gjsite.com/ ，在一个国家被涂成绿色或红色后，它不再有悬停颜色。

更新:很确定这是因为 !important 在您的 CSS 中。如果我将其添加到我上面引用的页面中的路径:悬停选择器，它的行为与您的相同。

为了澄清，这就是我要尝试的:

1. 重新考虑您的 css 规则的逻辑，以避免在您将使用 javascript 修改的任何内容上使用 !important。
2. 在您的脚本中，当您将一个国家指定为“拥有”时，除了更改类和数据属性外，还可以使用 document.getElementById 直接修改填充/描边。

另外:请注意 jQuery 并不完全支持 svg。