Javascript 如何使用Jquery突出显示svg映射？

我在使用jquery突出显示地图中的状态时遇到问题。我已经使用javascript实现了它` SVG插画测试

    <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>

var a=document.getElementById（“alphasvg”）；
//向对象添加加载事件侦听器很重要，因为它将异步加载svg文档
a、 addEventListener（“加载”，函数（）{
var svgDoc=a.contentDocument；//获取alpha.svg的内部DOM
var delta=svgDoc.getElementById（“states”）；//按id获取内部元素
delta.addEventListener（“mouseover”，function（evt）{evt.target.setAttributeNS（null，“opacity”，“0.5”）；}，false）；//添加行为
delta.addEventListener（“mouseout”，function（evt）{evt.target.setAttributeNS（null，“opacity”，“1”）；}，false）；//添加行为
}，假）；

`

    <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中这样做，因为我还想添加工具提示，以便在鼠标悬停时状态名称也会显示出来。

---

因此，基本上我想知道如何使用jquery使用SVG的id或类或标记来执行不同的操作。

有一个名为this的库可能会对您有所帮助。

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

    <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>

---

请随意使用这段代码，因为它非常基本，我从维基百科中提取了这张地图。

不，我没有得到它。。。如果我知道如何在svg文件或此html中使用jquery会更好。这样我就可以直接在jquery选择器中使用svg元素。@Phrogz这不是真的，可以通过jquery选择与html基本相同的svg元素（使用id对我来说很好）。一个区别是SVG文件必须直接嵌入到DOM中。在本例中，您是正确的，因为他使用的是对象标记。@Jlange我感到尴尬并更正了，现在已删除了我的错误信息。谢谢。：）@Krunal Shah我下面的解决方案对你有帮助吗？

    <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>