contentDocument в jQuery

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

Вот так:

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

Демонстрация здесь и код здесь .Обратите внимание, что я использовал <iframe> для демонстрации, поэтому первый URL будет работать, второй даст вам ошибку «Отказано в доступе», если вы попытаетесь запустить скрипку.

Answer 2

Вы должны иметь возможность доступа к путям напрямую, как к элементам, без необходимости в contentDocument или getElementsByTagName и т. Д .:

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

    $(window).load(function () {

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

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

        })

    });
});

Answer 3

Если вы встраиваете SVG в HTML с помощью тега объекта (в отличие от встроенного SVG), то это дубликат предыдущего вопроса, ответ на который можно найти здесь: Как получить доступ к элементам SVGс Javascript