如何使用jQuery修改以Object形式加载的外部SVG？

我已经有一个用D3.js修改外部SVG元素的可行示例，但无法用jQuery实现相同效果。我不能使用内联SVG，也不想在SVG文件中添加JS代码。

SVG文件内容 #

<svg stroke="#000" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path id="drop1" d="M21 14.7C21 18.1794 19.0438 21 15.5 21C11.9562 21 10 18.1794 10 14.7C10 11.2206 15.5 3 15.5 3C15.5 3 21 11.2206 21 14.7Z" />
  <path id="drop2" d="M8 8.2C8 9.7464 7.11083 11 5.5 11C3.88917 11 3 9.7464 3 8.2C3 6.6536 5.5 3 5.5 3C5.5 3 8 6.6536 8 8.2Z" />
</svg>

用Object标签加载SVG #

<object onload="colorize()" id="svg" type="image/svg+xml" data="image.svg"></object>

可行的D3.js实现代码 #

<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
  function colorize() {
    var drops = d3.select(document.getElementById("svg").contentDocument);
    if(drops.empty()) {
      setTimeout(colorize, 100);
    } else {
      drops.select("#drop1").attr("fill", "#f00");
      drops.select("#drop2").style("visibility", "hidden");
    }
  }
</script>

jQuery尝试的问题 #

我尝试用jQuery替代，但无法获取目标元素：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  function colorize() {
    $("#svg #drop1")
    ...
  }
</script>

jQuery解决方案 #

问题核心是：jQuery默认只会在当前主文档的DOM中搜索元素，而Object加载的SVG是一个独立的子文档，需要先获取这个子文档对象，再在其中查找元素。同时要处理SVG加载的延迟情况，确保内部文档完全就绪。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function colorize() {
  var svgObj = document.getElementById("svg");
  // 获取SVG所在的独立文档对象，兼容不同浏览器写法
  var svgDoc = svgObj.contentDocument || svgObj.contentWindow.document;
  
  // 检查SVG文档是否加载完成，未完成则延迟重试
  if (!svgDoc || !svgDoc.getElementById("drop1")) {
    setTimeout(colorize, 100);
    return;
  }

  // 用jQuery操作子文档内的SVG元素
  $(svgDoc).find("#drop1").attr("fill", "#f00");
  $(svgDoc).find("#drop2").css("visibility", "hidden");
}
</script>

关键说明 #

• 必须先获取Object的contentDocument（旧浏览器需兼容contentWindow.document），这是SVG元素所在的独立文档
• 直接使用$("#svg #drop1")无效，因为主文档的DOM树中不存在SVG内部的#drop1元素
• 加入延迟重试逻辑，避免因SVG未完全加载导致的元素获取失败

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