Question

我试图实现svg.js来制作可点击的平面图的地图。但我无法使这项工作正常，或者这种方法有效，但并不像我预期的那样工作：

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

map.click(function( event ) {

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

当我尝试点击地图上的某个区域时，我没有得到任何结果，而是更改填充颜色。实际上svgjs会触发＆＃39;创建＆＃39;正如您在带有检查员的控制台中看到的那样。

不确定我在这里做错了什么？我希望该区域会改变填充色？

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

Answer 1

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

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，我建议为每个可点击元素添加一个类，以将其用作select的引用。否则，您必须单独选择所有元素ID'类型'（即餐馆，零售等），并在执行循环添加点击之前使用Set连接Set.add()听众，但这可能会变得混乱。

svg.js与现有的svg

1 个答案: