如何通过jQuery修改SVG内指定g分组的fill填充颜色

你当前用<img>标签加载SVG的方式无法直接操作SVG内部节点：这种引入模式下SVG是作为独立外部资源渲染的，它的内部结构不会进入当前页面的DOM树，所有选择器都没法匹配到SVG里的#part-1节点。
要实现运行时修改内部元素样式，你首先要把SVG作为DOM节点嵌入页面，两种常用方案：

• 直接把SVG的完整代码内联写到HTML对应位置
• 通过AJAX请求拉取SVG文件内容，再插入到页面DOM中

方案1：动态加载SVG后修改（适合不想把SVG代码直接写在HTML里的场景） #

// 拉取SVG资源
$.get('../path/to/img/logo.svg', function(svgRes) {
  // 把SVG节点插入到页面的容器中，比如class为logo-wrap的元素
  $('.logo-wrap').append(svgRes.documentElement);
  
  // SVG插入DOM后就可以直接操作目标节点了
  // 给g标签设置fill属性，内部未单独设置fill的子元素会自动继承该颜色
  $('#part-1').attr('fill', '#2563eb');
})

方案2：内联SVG直接修改（适合SVG体积小的场景） #

如果你直接把SVG代码写在HTML里，不需要额外加载，直接在DOM就绪后执行修改即可：

$(function() {
  // DOM加载完成后直接修改
  $('#part-1').attr('fill', '#2563eb');
})

• 你提供的SVG结构里，#part-1下的两个path没有单独设置fill属性，给父级g设置fill会直接生效；和g同级的两个path单独加了fill="red"，不会受g标签的fill属性影响。
• 如果你需要强制覆盖#part-1下所有子元素自带的fill属性，可以用CSS方法设置，优先级更高：

  // 给g加fill样式，同时覆盖所有子path的fill
  $('#part-1').css('fill', 'green').find('path').css('fill', 'green');
  

• 如果你坚持使用<img>标签引入SVG，没有办法通过DOM操作修改内部样式，只能提前准备好多份不同颜色的SVG文件，通过修改img的src属性做切换。

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