如何将SVG与2 div Jquery连接

<div id="div1"></div>
<svg id="svg1"></svg>
<div id="div2"></div>

$(document).ready(function() {
  // 获取div和svg元素
  var div1 = $("#div1");
  var svg1 = $("#svg1");
  var div2 = $("#div2");
  
  // 创建SVG路径元素
  var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  
  // 设置路径属性
  path.setAttribute("d", "M0,0 L100,100"); // 设置路径的起点和终点
  
  // 将路径添加到SVG元素中
  svg1.append(path);
  
  // 设置div1和div2的样式
  div1.css("width", "100px");
  div1.css("height", "100px");
  div1.css("background-color", "red");
  
  div2.css("width", "100px");
  div2.css("height", "100px");
  div2.css("background-color", "blue");
  
  // 将SVG元素的路径与div元素连接
  div1.css("position", "absolute");
  div1.css("top", "0");
  div1.css("left", "0");
  div1.css("clip-path", "url(#clipPath)");
  
  div2.css("position", "absolute");
  div2.css("top", "0");
  div2.css("left", "0");
  div2.css("clip-path", "url(#clipPath)");
});