DrgIonuţ Ответов: 1

Jquery select SVG elements inside an <object> tag

У меня есть SVG который имеет некоторые linearGradient элементы которые меняются при нажатии кнопки все работает нормально как вы можете видеть здесь: Edit fiddle - JSFiddle[^]

Мой вопрос заключается в том, как можно сделать то же самое, если svg из моего примера является внешним файлом и вызывается в теге <object>?

Что я уже пробовал:

Мое svg изображение:
<object data="Img/PumpStation/Pump.svg" type="image/svg+xml" id="alphasvg1111"></object>

Моя пуговица:
<asp:Button ID="Button1" class="test" runat="server" Text="Button" />

Моя функция jQuery:
jQuery('.test').on('click', function () {
    //$("object").contents().find("path").attr({ "fill": "red" });
    jQuery('object stop').each(function () {
        var color = jQuery(this).css('stop-color');
        if (color === 'rgb(77, 77, 77)') {
            jQuery(this).css('stop-color', '#ff0000');
        }
    });
});

Если я использую: 
$("object").contents().find("path").attr({ "fill": "red" });
, мой SVG становится красным при нажатии кнопки. Почему остальная часть функции не работает?

1 Ответов

Рейтинг:
12

Richard Deeming

То <object> элемент создает отдельный документ, аналогично тому, как <iframe>.

Поскольку он находится в том же домене, вы можете получить доступ к этому документу с помощью jQuery-х contents метод[^]. Но селектор jQuery, запущенный против документа верхнего уровня, не сможет выбрать элементы во вложенном документе.

jQuery("object stop") вернет ноль совпадений, так как stop не является частью текущего документа. Но jQuery("object").contents().find("stop") должен работать.

jQuery('.test').on('click', function () {
    jQuery('object').contents().find('stop').each(function () {
        var color = jQuery(this).css('stop-color');
        if (color === 'rgb(77, 77, 77)') {
            jQuery(this).css('stop-color', '#ff0000');
        }
    });
});