如何创建可读取外部SVG contentDocument的jQuery插件用于DOM操作？

首先要明确：jQuery插件完全可以使用原生JavaScript——jQuery本身就是基于原生JS编写的，插件里混用原生API是完全没问题的，这一点你不用担心。你遇到的contentDocument访问问题，大概率是插件执行时机或者元素处理方式的问题，而非jQuery插件不能用原生JS。

接下来分析问题并给出解决方案：

可能的原因 #

1. 插件执行过早：你全局代码里用了$(window).on('load')，这个事件会等所有资源（包括<object>里的SVG）加载完成后才触发。但如果你的插件是在DOMContentLoaded或者页面初始化阶段就执行，这时候SVG还没加载完毕，contentDocument自然无法访问。
2. jQuery对象未转换为原生元素：如果你在插件里直接用jQuery选中的对象去访问contentDocument，会失败——因为jQuery对象是包装后的集合，你需要先拿到原生DOM元素才能调用contentDocument属性。

完整的插件实现示例 #

下面是把你的逻辑封装成jQuery插件的代码，解决上述问题：

(function($) {
  $.fn.adjustSvgMargin = function() {
    // 遍历每个选中的元素（支持批量操作）
    return this.each(function() {
      const $svgObj = $(this);
      const svgElement = this; // 直接拿到原生DOM元素

      // 监听<object>自身的load事件，确保SVG加载完成
      svgElement.addEventListener('load', function() {
        try {
          const svgDoc = svgElement.contentDocument;
          if (!svgDoc) {
            console.error('无法访问SVG内容，可能存在跨域问题');
            return;
          }

          // 获取目标元素
          const group = svgDoc.getElementById('first-set');
          if (!group) {
            console.error('SVG中未找到id为first-set的元素');
            return;
          }

          // 定义调整margin的复用函数
          const adjustMargin = () => {
            const setHeight = group.getBoundingClientRect().height;
            $svgObj.css('margin-top', `-${setHeight * 2}px`);
          };

          // 初始执行一次调整
          adjustMargin();

          // 监听窗口resize事件，实时调整（加命名空间方便后续解绑）
          $(window).on('resize.adjustSvgMargin', adjustMargin);
        } catch (err) {
          console.error('处理SVG时出错:', err);
        }
      });

      // 如果SVG已经加载完成（比如插件在window.load之后初始化），手动触发load事件
      if (svgElement.contentDocument) {
        svgElement.dispatchEvent(new Event('load'));
      }
    });
  };
})(jQuery);

插件使用方法 #

在页面中这样调用（确保在window.load之后执行，保证SVG已加载）：

$(window).on('load', function() {
  // 操作所有.triangles元素
  $('.triangles').adjustSvgMargin();
  // 只操作第三个元素的话，可以这样：
  // $('.triangles:eq(2)').adjustSvgMargin();
});

额外注意事项 #

• 跨域问题：如果你的SVG文件和当前页面不在同一域名、端口或协议下，浏览器会阻止访问contentDocument，这时候需要配置CORS或者把SVG文件放到同域下。
• 事件解绑：如果插件可能被多次调用，建议在绑定resize事件前先解绑，避免重复绑定（示例中用了命名空间resize.adjustSvgMargin，方便后续通过$(window).off('resize.adjustSvgMargin')解绑）。
• 容错处理：代码中加入了元素存在性的判断，避免因为SVG结构变化导致代码报错。

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