2

我在使用 jquery 突出显示地图中的状态时遇到问题。我已经使用 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 来执行不同的操作。

4

2 回答 2

0

您应该将文件直接嵌入到您的 HTML 中（使用 SVG 标签）。这将允许您使用纯 jQuery 选择不同的 SVG 元素。看这里

随意使用此代码，因为它非常基础，我从 Wikipedia 中提取了地图。

于 2013-01-10T22:00:27.350 回答
0

有一个名为jQuery SVG的库，它可能会对您有所帮助。

于 2013-01-07T08:03:58.007 回答