使用SVG地图的活动类

Question

我有一个SVG地图，当我点击路径时，我想要添加一个active类。我已经有了地图的样式。

<style>
#svg-map path{ fill:#cacaca }
#svg-map text{ fill:#fff; font:12px Arial-BoldMT, sans-serif; cursor:pointer }
#svg-map a{ text-decoration:none }
#svg-map a:hover{ cursor:pointer; text-decoration:none; }
#svg-map a path{ fill:#21b2a6 }
#svg-map a:hover path{ fill:#187971 !important;}
#svg-map .circle{ fill:#898989 !important; }
#svg-map a:hover .circle{ fill:#222 !important; cursor:pointer; }
#svg-map .map_active{ fill:#000 }
</style>

SVG地图示例：

<a xlink:href="#" id="tocantis" onclick=""><path stroke="#FFFFFF" stroke-width="1.0404" 
stroke-linecap="round" stroke-linejoin="round" d="M289.558,235.641c16.104,0.575,44.973-31.
647,44.835-45.259c-0.136-13.612-17.227-58.446-22.349-66.088c-5.122-7.628-37.905,2.506-37.
905,2.506S234.852,233.695,289.558,235.641z"></path><text transform="matrix
(1 0 0 1 287.0137 188.3208)" fill="#FFFFFF">TO</text></a>

我使用这个脚本来改变活动类别，但它不起作用。

<script>

$(function () {

$('#svg-map path').click(function (e) {
    e.preventDefault();
    $(this).closest('path').addClass('map_active').siblings().removeClass('map_active');

});

});
</script>

那么有什么方法可以解决这个问题吗？

- Dennys Ferreira

---

为什么不允许在<a>标签外部点击呢？ - Ted Johnson

顺便说一句，你的第一个问题表述得很好。 - Ted Johnson

Dennys Ferreira @Ted Johnson：我以为我对jquery和svg都很了解，但是这个例子让我感到困惑。这里发生了什么？当我创建一个jsfiddle时，我什么也看不到。难道还有我没有看到的更大的谜题吗？ - zipzit

有几个问题：

1. 单击后，响应在下面。
2. 不需要最近的。
3. 鉴于a标签包装它的兄弟可能找不到您要查找的内容，也就是什么都没有。

- Ted Johnson

除了评论中提到的其他问题之外，您最大的问题将是使用jQuery本身操纵SVG。因为jQuery是设计用来处理HTML命名空间的，所以在处理SVG时存在严重问题。请参阅我对类似问题的答案，了解为什么addClass()和removeClass()无法与SVG一起使用的摘要。如果您对详细了解感兴趣，可以查看更全面的解释。 - altocumulus

Answer 1

为什么不允许在标签外面点击呢？

$('#tocantis').click(function () { alert("replace with your callback"); }); 
//replace with your function/callback.

刚试了一下，似乎能够很好地检测出点击事件。

对于您的函数，显然您需要调整回调函数。 $(this).find('path');

- Ted Johnson

---

对不起，我觉得我没有表达清楚。外部标签使用ajax调用另一个HTML页面。我的地图有24条路径，每条路径都调用不同信息的另一个HTML页面。 - Dennys Ferreira