Question

我有以下js脚本来访问对象内的元素（SVG - <object data="bbbbbb.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object> ）

jQuery(document).ready(function($) {

    $(window).load(function () {


        var a = document.getElementById("alphasvg");
        var svgDoc = a.contentDocument; 
        var delta = svgDoc.getElementsByTagName("path");    
        $(delta).click(function() {

            //do stuff

        })

    });
});

我想使用jQuery来访问元素和标签。我完全停留在contentDocument部分。如何将其转换为jQuery，以便我可以使用attr等？

我希望能够访问和修改jQuery中的属性，而不必使用我不熟悉的传统js方法。

有人可以帮助我吗？

万分感谢。

Answer 1

您应该能够像元素一样直接访问路径，不需要contentDocument或getElementsByTagName等：

jQuery(document).ready(function($) {

    $(window).load(function () {

        $("#alphasvg path").click(function() {

            //do stuff
            // $(this).attr('d') = the path

        })

    });
});

Answer 2

像这样：

$(svgDoc).find("whatever").doWhatever();

Demo here和code here。请注意，我已使用<iframe>进行演示，因此第一个网址将起作用，如果您尝试运行小提琴，则第二个会给您“权限被拒绝”错误。

Answer 3

如果您使用object标签将SVG嵌入到HTML中（而不是内联SVG），那么这就是前一个问题的副本，其答案可以在这里找到：How to access SVG elements with Javascript

jQuery中的contentDocument

3 个答案: