javascript - 使用 jQuery 内联 SVG 中的目标 id

Question

我想定位 <a>用作响应式图像映射的内联 SVG 内的标签 ID。我不需要操作 SVG，只需在有人点击 <a href...> 时通过该 ID 启动带有 fancybox 的模式即可。 (在本例中启动本地页面的 iframe)

我已经阅读了十几个与此相关的线程，并了解存在 namespace 问题，但我是 JS 菜鸟，无法将其放在一起 - 感谢您的浏览!我确实尝试过 $('a[xlink\:href=#shows]') 但没有任何乐趣。

<小时/>

<div id="inline-svg">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1280" preserveAspectRatio="xMidYMin slice" width="100%" height="100%">
    <a xlink:href="http://www.facebook.com/" xlink:title="Facebook" xlink:show="new" id="facebook">
        <rect x="1102" y="392” width="102" height="104" style="fill:#ec2024;opacity:0.5”/>
    </a>
    <a xlink:href="http://twitter.com/" xlink:title="Twitter" xlink:show="new" id="twitter">
        <rect x="1102" y="520" width="102" height="104" style="fill:#ec2024;opacity:0.5”/>
    </a>
    <a xlink:href="#" xlink:title="Mailing List" id=“mlist">
        <rect x="1215" y="392" width=“102” height="104" style="fill:#ec2024;opacity:0.5”/>
    </a>
    <a xlink:href="shows.html" xlink:title=“Shows” id="shows" >
        <rect x="1215" y="520” width=“102” height="104" style="fill:#ec2024;opacity:0.5”/>
    </a>
    <rect width="1920" height="1280" style="fill:none"/>
  </svg>

</div>


<script type="text/javascript">
$(document).ready(function() {
    $("#shows”).fancybox({
        maxWidth    : 400,
        maxHeight   : 300,
        type        : 'iframe',
    });
});
</script>

Answer 1

改变:

$("#shows”).

至:

$("#shows").

应该可以正常工作。