Question

我是html等新手，我正在尝试创建一个SVG地图，通过点击它可以更改国家/地区的填充颜色（path）。< / p>

到目前为止，我设法在悬停在路径上时更改填充，但是我无法通过点击来切换颜色。因此，目标是用户可以将鼠标悬停在路径上并突出显示。单击时，填充将更改为某个值（＆＃34;标记为＆＃34;），并在第二次单击后再次更改回原始填充颜色。 如何在点击路径时实现填充颜色的切换？

以下是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>

Answer 2

如果你不能像谢尔盖提到的那样使用Jquery，你可以使用classList.toggle()方法来使用普通的Javascript。

＆＃13;

// first we get all the path elements and put them in an array
let paths = document.getElementsByTagName('path')

//now we can loop over the array and add an eventlistener to each path in the array
// it listens to the 'click' event and then runs function toggleClass()
for(let i=0; i<paths.length; i++){
    paths[i].addEventListener('click', toggleClass)
}

// In the function toggleClass we can toggle the 'clicked' class.
function toggleClass() {
    this.classList.toggle('clicked')
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

也许试试：

svg:hover path {
    "your css"
}

哎呀，你已经有了这个工作吗？ Sry for read post wrong

<script>

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

</script>

这个小样本是我能做的最好:)在js上不太好，但也许你可以改进。

Answer 4

Another option is to use jQuery to toggle between two classes:

printHash

void HashTableInit(int TableSize, int Key) {
//Create a space for HashTable as given in variable TableSize
struct hashTableNode * HT[TableSize];
for (int i = 0; i < TableSize; i++) {
    HT[i] = (struct hashTableNode*) malloc(sizeof (struct hashTableNode));
    HT[i] ->Key = 0;
    HT[i] ->next = NULL;
}

$('path').on("click", function() {
    var n = $(this).attr("class");

    if(n == "clicked") {
    	$(this).attr("class", "");
    }
    else {
    	$(this).attr("class", "clicked");
    }
});

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

4 个答案: