Question

我想在内联SVG中定位<a>标记的ID，该SVG用作响应式图像映射。我不需要操纵SVG，如果有人点击<a href...>，只需使用该ID启动带有fancybox的模态。（在这种情况下启动本地页面的iframe）

我已经阅读了十几个与此相关的线程，并了解有一个命名空间问题，但我是一个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").

应该可以正常工作。

使用jQuery在内联SVG中的目标id

1 个答案: