javascript - 在我的 SVG 底部生成 onclick 文本，修改 'selected' 颜色

Question

在教程的帮助下，我用 SVG 构建了英格兰五个地区的 map 。我用 Raphael 进行过一些工作。到目前为止，大部分内容似乎都进展顺利: http://codepen.io/msummers40/pen/EjExeO 我正在尝试添加另外两个功能，但我不确定该怎么做。请问您能帮忙吗？

我想:设置单击时区域变红的效果，以便只有最近单击的区域才着色。您能帮忙解释一下我应该做什么来实现从一个地区到另一个地区的转变吗？目前，一个区域被点击并保持突出显示。

我想知道如何在 Canvas 底部添加更多文本。这可能意味着向我的 JSON 添加更多信息，但我希望可以将文本(大约带有超链接的两个段落)添加为字符串。

如果您对我可以完成上述两件事的方法有什么想法，可以告诉我吗？

谢谢你， 马特

完整代码为on Codepen 。我在下面添加的是代码的代表性示例。

var regions = [
{'title':"northeast_england", 'path' : "M219.02,6.876l-0.079,0.05l-0.482,0.371L218.23,7.47l-0.858,0.346h-0.008l-0.307,0.26l-0.779,0.666 l-0.104,0.278l-0.005,0.019l0.056,0.481l0.116,0.846l0.048,0.395l-0.344,1.05l-0.052-0.007v0.007l-0.635-0.081l-0.375,0.167 l-0.148,0.061v0.006l-0.1,0.328l0.178,0.338l-0.104,0.353h-0.006l-0.32,0.179l-0.056,0.031l-0.161,0.729h-0.006v0.012l-0.271,0.117 l-0.08,0.031l-0.031-0.019l-0.043,0.019l-0.327-0.167l-0.147-0.079l-0.117-0.007h-0.021l-0.216-0.006l-0.419,0.252l-0.009,0.007 l-0.004,0.302v0.605l-0.117,0.292l-0.037,0.11h-0.006v0.006h-0.025l-0.37,0.056l-0.536,0.079l-0.562,0.372l0.017,0.165l0.033,0.187 l0.481,0.788l0.023,0.038l0.008,0.013l-0.988,0.425l-0.594,0.637l-0.011,0.03l-0.187,0.637l-0.068,0.062l-0.801,0.747l-0.409,0.617 l0.062,0.414l0.068,0.414l-0.012,0.012l-0.203,0.228h-0.008l-0.123,0.05l-0.006,0.005l-0.377,0.136l-0.073,0.074l-0.13,0.143 l-0.401,0.426l-0.081,0.08l-0.055,0.055l-0.116,0.136l-0.05,0.364l0.646,0.191l0.025,0.119l0.05,0.153l-0.265,0.148l-0.26,0.155 l-0.155-0.006l-0.005,0.006l-0.309-0.006l-0.648-0.365l-0.624,0.142l-0.363,0.087l-......LOTS MORE COORDINATES...."},

THERE ARE SEVERAL OTHER SVG REGIONS/SHAPES IN THE CODEPEN LINK


var MAP_WIDTH  = 600;
var MAP_HEIGHT = 600;

var mapContainer = document.getElementById("map");
var map = new Raphael(mapContainer, MAP_WIDTH, MAP_HEIGHT);
var group = map.set();

var style = {
  fill: "#ddd",
  stroke: "#aaa",
  "stroke-width": 1,
  "stroke-linejoin": "round",
  cursor: "pointer"
};


regions.forEach(function(region){
    group.push(
     map.path(region.path).attr('title', region.title)
   );  
});

group.attr(style);
group.click(function(){
  var slug = this.attr('title');
  var title;
  var fill = this.attr('fill') == 'red' ? '#1f1f1f' : 'red';

  // format the title
  title = slug.split('-')
         .map(function(subString){
            return subString[0].toUpperCase() + subString.substr(1);
          })
          .join(' ')
          .trim();


  // add some color
  this.attr('fill', fill);

  // do something useful
  document.getElementById('title').textContent = title;
});

Answer 1

对于突出显示的事情，我要做的就是让您的点击功能如下(伪代码)::

on-region-clicked {
   remove class "highlight" from all regions
   add class "highlight" to clicked region 
}

类“亮点”在哪里:

.highlight {
  fill: red;
}

我将把实际的 Raphael 代码留给你。