在我的 SVG 底部生成点击文本，修改 'selected' 颜色

Question

借助教程，我用 SVG 构建了英格兰五个地区的地图。我已经使用 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 
}

其中 class "highlight" 是：

.highlight {
  fill: red;
}

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

在我的 SVG 底部生成点击文本，修改 'selected' 颜色

Generating onclick text at the bottom of my SVG, modifying 'selected' colour

javascript

svg

dictionary

raphael