Question

在我的项目中，我有一个SVG世界地图，其中包含不同ID的不同路径和一个map-path类。对于每个国家/地区，单击我想在每个路径上添加类。我的HTML是这样的：

<svg viewBox="">
    <path id="map_1" class="map-path" ......>
    <path id="map_2" class="map-path" ......>
    <path id="map_3" class="map-path" ......>
    <path id="map_4" class="map-path" ......>
    <!-- more <path /> elements... -->
</svg>

Answer 1

JQuery函数addClass()在这里不起作用，无法向SVG添加类。

改为使用.attr()：

$('body').on('click','.map-path',function() {
    $(this).attr("class", "map-path newclass");
});

您可以使用setAttribute()方法的纯js解决方案：

$('body').on('click','.map-path',function(e) {
    e.target.setAttribute("class", "map-path newclass");
});

或使用适用于现代浏览器的classList.add()：

$('body').on('click','.map-path',function(e) {
    e.target.classList.add('newclass');
});

希望这有帮助。

在svg路径元素

1 个答案: