javascript - 如何使 SVG 元素成为链接?

标签 javascript jquery html svg

如何使嵌入在 HTML 文件中的 svg 图像的每个元素(例如带有某些类的圆圈等)成为事件链接? 我需要一个代表某些元素的 svg 图像,它们应该是可点击的链接。

那是SVG图像的片段:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<a href="http://google.com" ><rect x="-124.203" y="112.232" fill="#E88324" stroke="#000000" stroke-miterlimit="10" width="175.362" height="226.087"/> </a> 

我制作了第二个 div:

<div class="displayer" style=" width:100%; height: 100%;">
</div>

并尝试使用 jQuery 来做到这一点:

$(document).ready( function () {
    $("a").click(function() {
        // $("body").hide();
        $(".displayer").load("http://google.com");
});
    });

但是没有意义,你会怎么做呢?

最佳答案

尝试一下,在fiddle中测试

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="612px" height="792px" viewBox="0 0 612 792" 
 enable-background="new 0 0 612 792" xml:space="preserve">
    <a xlink:href="http://google.com">
      <rect x="-124.203" y="112.232" fill="#E88324" 
        stroke="#000000" stroke-miterlimit="10" 
        width="175.362" height="226.087"/> </a> 
</svg>

你只是忘记了 xlink:href<a>里面svg

关于javascript - 如何使 SVG 元素成为链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29628381/

相关文章:

jquery - MVC Razor动态构建onclick事件以显示模态

javascript - 如何让 froala 编辑器允许所有内联 html 标签?

javascript - 选择单选按钮时不出现文本框

javascript - 使用 PrimePush 时 FF 错误控制台出现 "not-well-formed"错误

javascript - Jquery 脚本在 Internet Explorer 中不工作

javascript - 将网页链接加载到 div 或 iframe

html - 为整个网站设置最大宽度时遇到问题?

javascript - IE : Placeholder of input field affect the width of select box

javascript - PHP和JS中没有IV的AES加密给出了不同的结果

javascript - display.html typescript 不工作