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

Posted 2023-03-06

【中文标题】如何使用 Jquery 突出显示 svg 地图？

【英文标题】：How to use Jquery to highlight svg map?

【发布时间】：2012-12-20 22:45:57

【问题描述】：

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

    <object data="map_with_hover.svg" type="image/svg+xml" id="alphasvg"  ></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 执行不同的操作。

【问题讨论】：

@Phrogz 这不是真的，可以通过 jQuery 选择与 HTML 非常相似的 SVG 元素（使用 id 对我来说效果很好）。不同之处在于 SVG 文件必须直接嵌入到 DOM 中。在这种情况下，您是正确的，因为他使用的是对象标签。

@Jlange 我感到尴尬并已更正，现在已经删除了我的错误信息。谢谢。 :)

@Krunal Shah 我下面的解决方案对您有帮助吗？

【参考方案1】：

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

【讨论】：

不明白...如果我知道如何在 svg 文件或这个 html.. 中使用 jquery 会更好，这样我就可以在我的 jquery 选择器中直接使用 svg 元素。

【参考方案2】：

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

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