Question

如何使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");
});
    });

但它没有意义，你会怎么做？

Answer 1

试一试，在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

如何使SVG元素成为链接？

1 个答案: