用jQuery实现内插SVG中的目标id

Question

我想把一个<a>标签的ID定位在一个内联的SVG中，它被用作一个响应性的图像地图。我不需要操作SVG，只要有人点击那个<a href...>，就用这个ID启动一个带有fancybox的模式。(在本例中启动本地页面的iframe )

我已经阅读了十几个与此相关的线程，并理解存在一个名称空间问题，但我是一个JS，不能很好地将它放在一起--谢谢您的观看！我试过$(‘axlink\：href=#shows’)，但没有joy。

<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").

应该能正常工作。