我试图给 .svg 世界地图一个 JavaScript“点击更改颜色”功能。
预期行为:
单击一个国家更改其颜色,单击另一个国家更改颜色,但之前单击恢复为默认颜色。
我现在的错误:
单击一个国家,它的颜色改变了,但单击另一个,以前的颜色保持不变。
有错误的代码(意外):
svg结构:
<g name="us"><path>...</path></g>
<g name="au"><path>...</path></g>
<g name="es"><path>...</path></g>
.....
<g name="ca"><path>...</path></g>
JavaScript 部分:
(function () {
var world = document.getElementById("world"); // The svg file
world.addEventListener("load", function () {
var doc = world.getSVGDocument();
doc.addEventListener("click", function (e) {
e.preventDefault();
var target = e.target,
target.style.fill = "#eee";
});
});
}());
需要纯 JavaScript,不需要 jQuery。
如果元素(国家)是三个或五个,我可以这样做,但是元素太多,有没有一种紧凑的方法来获得这种效果?
感谢您的关注,如果可以,请帮助我。:)
紫衣仙女
相关分类