Question

我在每个SVG元素周围都有一个链接，当我点击一个链接时，我希望在fancybox的帮助下弹出一个图像。到目前为止，图像只是在新网站中弹出，而不是通过fancybox。在我添加SVG元素之前，它运行得很好。有什么提示吗？

我尝试过这样的事情：

<a class="fancybox" title="RAM" xlink:href="http://www.studioinfotronic.it/images/Memory-Module-icon.png" target="_blank"><polygon points="142.961,71.376 117.479,174.914 117.479,186.584 268.354,186.618 278.195,83.04 278.195,71.376"/></a>

http://jsfiddle.net/4AFaR/3/

Answer 1

似乎fancybox在从svg的链接（xlink:href）获取内容时遇到问题。

作为一种解决方法，我会使用.each()方法手动构建图库，如：

var gallery = [];
$(".fancybox").each(function (i) {
    gallery[i] = {
        href: $(this).attr("xlink:href"),
        title: $(this).attr("title")
    };
    $(this).on("click", function () {
        $.fancybox(gallery, {
            index: i,
            helpers: {
                title: {
                    type: 'inside',
                    position: 'top',
                }
            },
            openSpeed: 'slow',
            closeSpeed: 'slow',
            autoDimensions: true
        });
        return false;
    }); // on
}); // each

参见forked JSFIDDLE

jQuery：如何使用fancybox在SVG中打开链接？

1 个答案: