svg.js 与现有的 svg

Question

我正在尝试实施 svg.js 来制作可点击平面图的地图。但是我无法使它正常工作，或者它可以工作但没有像我预期的那样工作：

const map = SVG.get('mysvg');

map.click(function( event ) {

    this.fill({ color: '#000' });
    console.log(this);
    console.log(event.target);
});

当我尝试单击地图上的某个区域时，我没有更改填充颜色，而是什么也没得到。实际上 svgjs 触发 'create' 正如你在控制台中看到的那样。

不确定我做错了什么？我希望该区域会更改填充颜色？

https://codepen.io/bobz-zg/pen/LdyXBe

Answer 1

您可以按照 here 所述使用 select 函数来创建 Set。然后，您将使用 Set 中的 each() 方法迭代每个条目并应用点击事件处理程序。例如：

const map = SVG.get("mysvg");
var restaurants = map.select('[id*="restaurant"]:not(g)'); // Create an svg.js Set, but do not capture the group in the set

restaurants.each(function() {
  this.click(function(event) {
    this.fill({ color: "#000" });
  });
});

如果您可以编辑用作输入的 svg，我建议向每个可点击元素添加一个 class，以将其用作 select 的参考。否则，您将不得不执行类似 selecting 所有元素 id 'types'（即餐厅、零售等）的操作，并在您之前使用 Set.add() 连接 Set执行循环以添加点击侦听器，但这可能会变得混乱。

svg.js 与现有的 svg

svg.js with existing svg

svg

svg.js