如何更新 Mapel SVG 地图中特定国家/地区的背景颜色？

Question

我能够成功地将 Mapael 地图实施到我的 HTML 页面中，并且能够通过 JavaScript 代码根据我的喜好配置悬停填充颜色。

我正在尝试更改特定国家/地区的填充颜色。

我之前曾短暂地使用过 SVG，我曾经使用文本编辑器打开一个文件并以这种方式更新某些元素。 有没有不同的方法来做到这一点？

我想知道这是否可以与 Mapael 一起使用？ 以及从哪里获取 SVG 文件？

我下载并部署了存储库版本 (jQuery-Mapael-2.2.0)。

查看文件和文件夹的屏幕截图。

svg 代码文件

Answer 1

您必须使用 Mapael 特殊功能/参数：

    $(function () {
        $("yourMapElementSelector").mapael({
 // Customize some areas of the map
                areas: {
                    "US": {
                        attrs: {
                            fill: "#488402"
                        }
                        , attrsHover: {
                            fill: "#a4e100"
                        }
                    }
                },

    });
    });

Answer 2

我不确定 Mapael 是如何工作的，但通常我会对 SVG 做的是为每个国家/地区添加 ID，例如：

<g id="france">
or
<path id="france">

或者您使用的任何形状，然后只需定义一个类似于此的 CSS 类：

/* if the paths are inside a group */
.svgactive path {
   fill: red;
}

/* if the paths are standalone */
path.svgactive {
   fill: red;
}

只需在 SVG 文件中的特定 id 上切换.svgactive类。