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

Question

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

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

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

我想知道 Mapael 是否可行？以及从哪里获取 SVG 文件？

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

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

svg code file

Answer 1

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

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

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

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

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

只需切换 SVG 文件中您的特定 ID 上的 class .svgactive。

Answer 2

你必须使用特殊的 Mapael function/params:

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

  });
});

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

How do I update the background color of specific countries within a Mapel SVG Map?

svg

mapael