Question

我下载了一个世界地图SVG，以使用Javascript进行SVG操作。我的目标是在单击时更改美国的颜色，然后再次单击时将其恢复为原始颜色。这是SVG中定义美国的部分：

<path
inkscape:connector-curvature="0"
id="US"
data-name="United States"
data-id="US"
d="m 116.7,450.7 2,-0.9 2.5,-1.4 0.2,-0.4 -0.9,-2.2 -0.7,-0.8 
-7.1,-0.5 -6.2,-1.6 -4.8,0.5 -4.9,-0.9 2,-1.2 -6.3,-0.3 -3.3,1 
0.5,-2.4 z"
style="fill:#f2f2f2;fill-rule:evenodd" />

（我删除了很多坐标，因为它们使代码太长了）

这是CSS：

.united_states {
 fill: blue;
}

这是使用JQuery的javascript：

$(function(){
  $('#US').click(function(event){
    console.log("You just clicked on the United States!!");

 $('#US').toggle();
 $(this).toggleClass('.united_states');

  });
})();

最后，这是它的JsFiddle：link

将标记的“填充”属性更改为蓝色是可行的，但是我想在单击时进行操作，然后将其切换（蓝色然后再恢复为正常）。

谢谢您的帮助。

Answer 1

替换jQuery toggleClass。相反，您可以使用classlist属性，然后对其进行切换

参见下文：

(function($){
  $('#US').click(function(event){
    console.log("You just clicked on the United States!!");

  $(this).prop("classList").toggle("united_states");
  });
})(jQuery);

CSS：

.united_states {
 fill: blue !important;
}

https://jsfiddle.net/L0r5e2fg/13/

Answer 2

这个问题实际上并不需要另一个答案，但是我这样做是因为应该解释需要进行的更改，所以您知道为什么需要它们：

首先删除$('#US').toggle();。这导致该元素被隐藏。你不要那个。
从toggleClass()中的班级名称中删除点/句点。此处不需要：
```
$(this).toggleClass('united_states');
```
但这仍然无法使toggleClass()正常工作。这是因为地图文件已经具有使用style=""属性定义的填充颜色。 style属性的优先级高于CSS规则，因此您的.united_states {...}规则没有任何作用。

要解决此问题，您需要告诉浏览器CSS规则应覆盖style属性。您可以通过在CSS属性中添加!important来完成此操作：
```
.united_states {
  fill: blue !important;
}
```

Working fiddle

Answer 3

将代码更改为此

JS

$(function(){
  $('#US').click(function(event){
    $(this).toggleClass('united_states');
  });
})();

CSS

.united_states {
 fill: blue !important;
}

更改嵌入式SVG的颜色

3 个答案: