Jquery 选择 <object> 标签内的 SVG 元素答案

【问题标题】：Jquery select SVG elements inside an <object> tagJquery 选择 <object> 标签内的 SVG 元素
【发布时间】：2020-04-05 23:13:55
【问题描述】：

我有一个 SVG，它有一些线性渐变元素，在单击按钮时会发生变化，一切正常see here。我的问题是，如果我的示例中的 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 会变为红色。为什么其余功能不起作用？

【问题讨论】：

您希望“对象停止”选择什么？
搜索整个SVG中的所有标签。
您显示的对象标签不包含任何停止标签...
啊，我从彼得的回答中看到你在做什么:)

标签： jquery html object svg

【解决方案1】：

需要获取对象元素的内容：

jQuery('.test').on('click', function () {
    $("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');
        }
    });
});

【讨论】：