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

Question

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

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

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

我想知道Mapael是否可以做到这一点？那么从哪里获取SVG文件呢？

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

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

​

​

​

svg code file

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即可。