如何实现jQuery仅修改<object>引入的SVG中g1组内的stop标签颜色？

要实现只针对g1组内的stop标签修改颜色，你只需要在选择器里加上对#g1的限定，把原来全局查找stop的逻辑，改成先定位到#g1再查找它下面的stop元素就可以了。

原来的代码是直接遍历所有stop标签：

$("object").contents().find('stop').each(function () {

修改后，我们用CSS后代选择器限定范围，只处理#g1组内部的stop元素：

jQuery('.startP').on('click', function () {
  // 先定位到object内容里的#g1组，再查找它内部的stop标签
  $("object").contents().find('#g1 stop').each(function () {
    var color = jQuery(this).css('stop-color');
    if (color === 'rgb(77, 77, 77)') {
      jQuery(this).css('stop-color', '#00ff00');
    }
  });
});

补充说明 #

• #g1 stop这个选择器的作用是：选中所有属于id为g1的元素的后代的stop标签，精准匹配你的需求。
• 额外提醒：要确保SVG文件已经完全加载完成后再执行这段jQuery代码，否则可能会出现找不到#g1或stop元素的情况。如果遇到加载顺序问题，可以给object添加load事件监听，在SVG加载完成后再绑定按钮的点击事件。

内容的提问来源于stack exchange，提问作者Ionut