Question

我有一个问题，使用jquery.i突出显示地图中的状态已使用javascript实现它。 ` SVG Illustrator测试

    <object data="map_with_hover.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
<script>
    var a = document.getElementById("alphasvg");

    //it's important to add an load event listener to the object, as it will load the svg doc asynchronously
    a.addEventListener("load",function(){
        var svgDoc = a.contentDocument; //get the inner DOM of alpha.svg
        var delta = svgDoc.getElementById("states"); //get the inner element by id
        delta.addEventListener("mouseover",function(evt){ evt.target.setAttributeNS(null,"opacity","0.5");},false);    //add behaviour
        delta.addEventListener("mouseout",function(evt){ evt.target.setAttributeNS(null,"opacity","1");},false);    //add behaviour
    },false);
</script>

</body>
</html>

`

通过这个代码状态很容易突出显示，但我想在jquery中这样做，因为我也想添加工具提示，以便鼠标悬停状态名称也将显示。所以基本上我想知道如何使用SVG的id或类或标签来使用jquery来执行不同的操作。

Answer 1

有一个名为jQuery SVG的图书馆，这可能对您有帮助。

Answer 2

您应该将文件直接嵌入HTML中（使用SVG标记）。这将允许您使用普通的jQuery选择不同的SVG元素。见here

随意使用此代码，因为它非常基本，我从维基百科中删除了地图。

如何使用Jquery来突出显示svg地图？

2 个答案: