hover事件获取当前元素信息

最新推荐文章于 2024-07-24 13:54:51 发布

FairyLiberty

最新推荐文章于 2024-07-24 13:54:51 发布

阅读量1.2k

点赞数

文章标签： svg javascript

本文链接：https://blog.csdn.net/Sleeping_Fairy/article/details/117115152

版权

本文介绍了如何在SVG中使用hover事件来捕获元素的ID和坐标信息。通过示例代码展示了当鼠标悬停在SVG图形上时，如何利用jQuery从元素属性中获取x和y坐标，并在控制台打印。这对于交互式SVG图形的开发具有实际应用价值。

摘要由CSDN通过智能技术生成

SVG中使用 hover（）事件获取当前元素信息

svg结构部分

代码有点多，自己项目直接复制过来的，可以直接复制用

<svg width="1500" height="1500">
	<g id="svg1" x="651" y="150" width="120" height="80" type="baseType"
            typeG="deviceG" initx="651" inity="150" deviceTypeId="1" topX="711" topY="150" bottomX="711" bottomY="230"
            rightX="771" rightY="190" leftX="651" leftY="190"
            pathIdStr="path-52aeb3d8143581e0f75a76da1e205608,path-8149038c85fbea083ae8c2afe2e96c5d,path-91982c1130fb90e242a568e8983c2a2f,path-a431463fe7059fd8be7356aae7611136,path-ac4ca065868cb18b9158bf494ed10ec5,path-f3602ebfbb9774b1d6dc671d2a180be7">
            <rect id="EquipsW-35e5ce927d78ad75abd87e269226f01c" parentId="35e5ce927d78ad75abd87e269226f01c" width="120"
                height="40" x="651" y="150" topX="711" topY="150" bottomX="711" bottomY="190" leftX="651" leftY="170"
                rightX="771" rightY="170" stroke="#2f7dce" stroke-width="2" fill="#2C3040" fill-opacity="0.01"
                stroke-opacity="0.9" onmousedown="mousedown(event)"></rect>
            <rect id="EquipsN-35e5ce927d78ad75abd87e269226f01c" parentId="35e5ce927d78ad75abd87e269226f01c" x="651"
                y="190" width="120" height="40" topX="711" topY="190" bottomX="711" bottomY="230" leftX="651"
                leftY="210" rightX="771" rightY="210" stroke="#2f7dce" stroke-width="2" fill="#2C3040"
                fill-opacity="0.01" stroke-opacity="0.9" onmousedown="mousedown(event)"></rect>
        </g>

        <g id="svg2" x="277" y="361" width="120" height="80" type="baseType" typeG="deviceG" initx="222" inity="517"
            deviceid="2" topX="337" topY="361" bottomX="337" bottomY="441" rightX="397" rightY="401" leftX="277"
            leftY="401" offsetXAtrr="55" offsetYAtrr="-156" style="transform: translate(55px, -156px);">
            <rect id="EquipsW-639a52a5eb525ff6821a0663201e415c" parentId="639a52a5eb525ff6821a0663201e415c" width="120"
                height="40" x="222" y="517" topX="282" topY="517" bottomX="282" bottomY="557" leftX="222" leftY="537"
                rightX="342" rightY="537" stroke="#2f7dce" stroke-width="2" fill="#2C3040" fill-opacity="0.01"
                stroke-opacity="0.9" onmousedown="mousedown(event)"></rect>
            <rect id="EquipsN-639a52a5eb525ff6821a0663201e415c" parentId="639a52a5eb525ff6821a0663201e415c" x="222"
                y="557" width="120" height="40" topX="282" topY="557" bottomX="282" bottomY="597" leftX="222"
                leftY="577" rightX="342" rightY="577" stroke="#2f7dce" stroke-width="2" fill="#2C3040"
                fill-opacity="0.01" stroke-opacity="0.9" onmousedown="mousedown(event)"></rect>
        </g>
 </svg>

JS结构部分

 $("g").hover(function () {
        var id = $(this).attr("id");
        var x = $(this).attr("x");
        var y = $(this).attr("y");
        console.log(id, x, y);
    }, function () {
        // alert(321)
    });