javascript - 单击更改内联 SVG 路径的填充

Question

我是 html 等的新手，我正在尝试制作一个 SVG map ，可以通过单击它来更改国家(路径)的填充颜色。

到目前为止，我设法在将鼠标悬停在路径上时更改了填充，但我无法让它在点击时切换颜色。因此，目标是用户可以将鼠标悬停在路径上并突出显示。当他单击时，填充会更改为某个值(“已标记”)，并在第二次单击后再次变回原始填充颜色。 如何在单击路径时切换填充颜色？

这里是html文件的一部分，只排除了其他svg路径:

<link rel="stylesheet" class="st0"type="text/css" class="st0"href="main.css" class="st0"/>

<?xml version="1.0" class="st0"encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1"
     id="world-map" class="st0"inkscape:version="0.91 r13725" class="st0"sodipodi:docname="World_map_-_low_resolution.svg" class="st0"xmlns:cc="http://creativecommons.org/ns#" class="st0"xmlns:dc="http://purl.org/dc/elements/1.1/" class="st0"xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" class="st0"xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" class="st0"xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" class="st0"xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg" class="st0"xmlns:xlink="http://www.w3.org/1999/xlink" class="st0"x="0px" class="st0"y="0px" class="st0"viewBox="0 0 950 620"
     style="enable-background:new 0 0 950 620;" class="st0"xml:space="preserve">

<path id="estonia" fill="#F5F5F5" d="M517.8,143.7l-5.6-0.2l-3.5,2.2l0,1.6l2.3,2.2l7.2,1.2L517.8,143.7L517.8,143.7z
M506.8,147.6l-1.5-0.1l-0.9,0.9l0.6,1l1.5,0.1l0.8-1.2L506.8,147.6L506.8,147.6z
M506.6,151.7l-1.5-0.1l-2.7,3.2v1.5l0.9,0.4l1.8,0.1l2.9-2.4l0.4-0.8L506.6,151.7L506.6,151.7z"/>

<path id="sweden" fill="#F5F5F5" d="M497.7,104.6l2,1.8h3.7l2,3.9l0.5,6.7l-5,3.5v3.5l-3.5,4.8l-2,0.2l-2.8,4.6l0.2,4.4l4.8,3.5l-0.4,2l-1.8,2.8
    l-2.8,2.4l0.2,7.9l-4.2,1.5l-1.5,3.1h-2l-1.1-5.5l-4.6-7l3.8-6.3l0.3-15.6l2.6-1.4l0.6-8.9l7.4-10.6L497.7,104.6L497.7,104.6z
    M498.5,150.2l-2.1,1.7l1.1,2.4l1.9-1.8L498.5,150.2L498.5,150.2z"/>

</svg>
<script src="main.js"></script>

这是 CSS 文件:

#world-map{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
path:hover {
  stroke: #339999 !important;
  stroke-width:2px;
  stroke-linejoin: round;
  fill: #002868 !important;
  cursor: pointer;
}

作为 main.js，到目前为止，我尝试了很多东西，但都没有用。我认为这可能与此类似，但我不确定:

$('path').on("click", function(e) {
    $(this).html({ fill: "#ff0000" });
});

如有任何帮助，我们将不胜感激!

Answer 1

您可以通过单击时的类操作来完成此操作(使用类属性更改，因为 jquery 的 addClass 不适用于 SVG，请参阅 this 了解更多详细信息)。非常天真的实现如下:

$('path').on("click", function() {
    $('path.selected').attr("class", "");
    $(this).attr("class", "selected");
});

path {
  cursor: pointer;
  fill: grey
}
.selected {
  fill: #002868;
  stroke: #339999;
  stroke-width: 2px;
  stroke-linejoin: round;;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<svg width="100%" height="100%" viewBox="400 0 500 320" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <path id="estonia" d="M517.8,143.7l-5.6-0.2l-3.5,2.2l0,1.6l2.3,2.2l7.2,1.2L517.8,143.7L517.8,143.7z
M506.8,147.6l-1.5-0.1l-0.9,0.9l0.6,1l1.5,0.1l0.8-1.2L506.8,147.6L506.8,147.6z
M506.6,151.7l-1.5-0.1l-2.7,3.2v1.5l0.9,0.4l1.8,0.1l2.9-2.4l0.4-0.8L506.6,151.7L506.6,151.7z"></path>

<path id="sweden" d="M497.7,104.6l2,1.8h3.7l2,3.9l0.5,6.7l-5,3.5v3.5l-3.5,4.8l-2,0.2l-2.8,4.6l0.2,4.4l4.8,3.5l-0.4,2l-1.8,2.8
    l-2.8,2.4l0.2,7.9l-4.2,1.5l-1.5,3.1h-2l-1.1-5.5l-4.6-7l3.8-6.3l0.3-15.6l2.6-1.4l0.6-8.9l7.4-10.6L497.7,104.6L497.7,104.6z
    M498.5,150.2l-2.1,1.7l1.1,2.4l1.9-1.8L498.5,150.2L498.5,150.2z"></path>

</svg>