我已经添加了名称为 Path1 且值为 1,3,5,8 的数组，如果您看到 SVG，这是 id 名称，我需要的是，我必须从数组中获取值来创建行
目前代码正在处理起点和终点，但我想要多个点。
如果您有任何疑问或问题，请帮助并告诉我
提前致谢。
//helper functions, it turned out chrome doesn't support Math.sgn()
function signum(x) {
return (x < 0) ? -1 : 1;
}
function absolute(x) {
return (x < 0) ? -x : x;
}
function drawPath(svg, path, startX, startY, endX, endY) {
// get the path's stroke width (if one wanted to be really precize, one could use half the stroke size)
var stroke = parseFloat(path.attr("stroke-width"));
// check if the svg is big enough to draw the path, if not, set heigh/width
if (svg.attr("height") < endY) svg.attr("height", endY);
if (svg.attr("width" ) < (startX + stroke) ) svg.attr("width", (startX + stroke));
if (svg.attr("width" ) < (endX + stroke) ) svg.attr("width", (endX + stroke));
var deltaX = (endX - startX) * 0.15;
var deltaY = (endY - startY) * 0.15;
// for further calculations which ever is the shortest distance
var delta = deltaY < absolute(deltaX) ? deltaY : absolute(deltaX);
// set sweep-flag (counter/clock-wise)
// if start element is closer to the left edge,
// draw the first arc counter-clockwise, and the second one clock-wise
var arc1 = 0; var arc2 = 1;
if (startX > endX) {
arc1 = 1;
arc2 = 0;
}
// draw tha pipe-like path
// 1. move a bit down, 2. arch, 3. move a bit to the right, 4.arch, 5. move down to the end
path.attr("d", "M" + startX + " " + startY +
" V" + (startY + delta) +
" A" + delta + " " + delta + " 0 0 " + arc1 + " " + (startX + delta*signum(deltaX)) + " " + (startY + 2*delta) +
" H" + (endX - delta*signum(deltaX)) +
" A" + delta + " " + delta + " 0 0 " + arc2 + " " + endX + " " + (startY + 3*delta) +
" V" + endY );
}
function connectElements(svg, path, startElem, endElem) {
var svgContainer= $("#svgContainer");
// if first element is lower than the second, swap!
if(startElem.offset().top > endElem.offset().top){
var temp = startElem;
startElem = endElem;
endElem = temp;
}
// get (top, left) corner coordinates of the svg container
var svgTop = svgContainer.offset().top;
var svgLeft = svgContainer.offset().left;
// get (top, left) coordinates for the two elements
var startCoord = startElem.offset();
var endCoord = endElem.offset();
// calculate path's start (x,y) coords
// we want the x coordinate to visually result in the element's mid point
var startX = startCoord.left + 0.5*startElem.outerWidth() - svgLeft; // x = left offset + 0.5*width - svg's left offset
var startY = startCoord.top + startElem.outerHeight() - svgTop; // y = top offset + height - svg's top offset
// calculate path's end (x,y) coords
var endX = endCoord.left + 0.5*endElem.outerWidth() - svgLeft;
var endY = endCoord.top - svgTop;
// call function for drawing the path
drawPath(svg, path, startX, startY, endX, endY);
}
var path1 = ['1', '3', '5', '8'];
function connectAll() {
//connect all the paths you want!
connectElements($("#svg1"), $("#path1"), $("#1"), $("#3"));
}
$(document).ready(function() {
// reset svg each time
$("#svg1").attr("height", "0");
$("#svg1").attr("width", "0");
connectAll();
});
$(window).resize(function () {
// reset svg each time
$("#svg1").attr("height", "0");
$("#svg1").attr("width", "0");
connectAll();
});body{ background-color:#fff; }
#svgContainer {
z-index: -10;
position:absolute;
background-color:silver;
opacity: 0.5;
}
#outer{
margin:0 auto;
width: 80%;
}
#teal{
width: 6em;
height: 6em;
background-color:teal;
margin-left: 10%;
}
#orange{
height: 4em;
width: 35%;
padding: 2em 8em;
margin-left: 8em;
margin-top: 6em;
background-color: orange;
}
#red{
width:6em;
height: 4em;
margin-left: 30%;
padding:4em 3em;
background-color:red;
}
#aqua{
width: 5em;
height: 5em;
margin-left:15%;
background-color:aqua;
}
#purple{
width: 15em;
height: 5em;
background-color:purple;
}
#green{
width: 5em;
height: 7em;
margin-top: 2em;
margin-left: 50%;
background-color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgContainer" style="margin: 50px 50px;">
<svg id="svg1" width="0" height="0" >
<path id="path1" d="M0 0" stroke="#E80C0C" fill="none" stroke-width="5px";/>
<path id="path2" d="M0 0" stroke="#01634C" fill="none" stroke-width="5px";/>
<path id="path3" d="M0 0" stroke="#010D63" fill="none" stroke-width="5px";/>
<path id="path4" d="M0 0" stroke="#520163" fill="none" stroke-width="5px";/>
<path id="path5" d="M0 0" stroke="#017F0D" fill="none" stroke-width="5px";/>
<path id="path6" d="M0 0" stroke="#80D309" fill="none" stroke-width="5px";/>
<path id="path7" d="M0 0" stroke="#192B01" fill="none" stroke-width="5px";/>
<path id="path8" d="M0 0" stroke="#8C3B03" fill="none" stroke-width="5px";/>
<path id="path9" d="M0 0" stroke="#03858C" fill="none" stroke-width="5px";/>
<path id="path10" d="M0 0" stroke="#EA4606" fill="none" stroke-width="5px";/>
<path id="path11" d="M0 0" stroke="#EA062C" fill="none" stroke-width="5px";/>
<path id="path12" d="M0 0" stroke="#01193A" fill="none" stroke-width="5px";/>
</svg>
</div>
<div id= "outer">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1172.745px" height="684.151px" viewBox="408 197.925 1172.745 684.151" enable-background="new 408 197.925 1172.745 684.151" xml:space="preserve">
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M509.531,337.377 c3.892,0,7.064-3.174,7.064-7.064c0-3.891-3.172-7.064-7.064-7.064c-3.89,0-7.063,3.173-7.063,7.064 S505.641,337.377,509.531,337.377z" id="38"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M631.609,411.941 c3.89,0,7.064-3.172,7.064-7.063c0-3.89-3.175-7.064-7.064-7.064c-3.891,0-7.065,3.174-7.065,7.064 C624.544,408.769,627.718,411.941,631.609,411.941z" id="31"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M524.71,454.175 c3.89,0,7.063-3.173,7.063-7.064s-3.174-7.065-7.063-7.065c-3.891,0-7.065,3.175-7.065,7.065S520.819,454.175,524.71,454.175z" id="9"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M602.574,526.761 c3.892,0,7.064-3.174,7.064-7.064c0-3.891-3.173-7.065-7.064-7.065c-3.89,0-7.063,3.175-7.063,7.065 C595.511,523.587,598.684,526.761,602.574,526.761z" id="36"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M526.69,683.811 c3.891,0,7.063-3.173,7.063-7.065c0-3.89-3.172-7.063-7.063-7.063c-3.891,0-7.065,3.173-7.065,7.063 C519.625,680.638,522.799,683.811,526.69,683.811z" id="6"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M652.725,679.191 c3.889,0,7.063-3.176,7.063-7.065s-3.173-7.063-7.063-7.063c-3.892,0-7.065,3.173-7.065,7.063 C645.659,676.016,648.833,679.191,652.725,679.191z" id="42"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M688.357,569.653 c3.89,0,7.063-3.176,7.063-7.066c0-3.889-3.173-7.063-7.063-7.063c-3.891,0-7.065,3.174-7.065,7.063 C681.292,566.478,684.466,569.653,688.357,569.653z" id="24"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M758.304,435.039 c3.891,0,7.063-3.173,7.063-7.064c0-3.891-3.173-7.063-7.063-7.063c-3.892,0-7.064,3.173-7.064,7.063 S754.413,435.039,758.304,435.039z" id="3"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M861.243,527.42 c3.891,0,7.063-3.173,7.063-7.063c0-3.891-3.173-7.065-7.063-7.065c-3.891,0-7.065,3.175-7.065,7.065 C854.178,524.247,857.352,527.42,861.243,527.42z" id="43"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M828.249,665.334 c3.891,0,7.064-3.175,7.064-7.064s-3.174-7.063-7.064-7.063c-3.89,0-7.064,3.174-7.064,7.063S824.359,665.334,828.249,665.334z" id="10"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M708.153,332.757 c3.892,0,7.064-3.173,7.064-7.063c0-3.891-3.173-7.065-7.064-7.065c-3.89,0-7.063,3.174-7.063,7.065 C701.089,329.584,704.263,332.757,708.153,332.757z" id="33"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M881.039,286.567 c3.89,0,7.063-3.172,7.063-7.063s-3.174-7.065-7.063-7.065c-3.892,0-7.065,3.175-7.065,7.065S877.147,286.567,881.039,286.567z" id="11"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M862.563,364.431 c3.891,0,7.063-3.173,7.063-7.063c0-3.89-3.173-7.063-7.063-7.063s-7.064,3.173-7.064,7.063 C855.498,361.258,858.671,364.431,862.563,364.431z" id="28"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M912.712,440.976 c3.891,0,7.064-3.171,7.064-7.063s-3.173-7.065-7.064-7.065s-7.063,3.174-7.063,7.065S908.821,440.976,912.712,440.976z" id="20"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M977.38,356.512 c3.89,0,7.062-3.172,7.062-7.063c0-3.891-3.173-7.065-7.062-7.065c-3.894,0-7.065,3.174-7.065,7.065 C970.314,353.34,973.486,356.512,977.38,356.512z" id="40"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1066.462,279.968 c3.889,0,7.062-3.173,7.062-7.063s-3.173-7.064-7.062-7.064c-3.893,0-7.065,3.174-7.065,7.064 C1059.396,276.794,1062.569,279.968,1066.462,279.968z" id="13"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1082.959,371.031 c3.89,0,7.063-3.173,7.063-7.063s-3.175-7.065-7.063-7.065c-3.894,0-7.065,3.174-7.065,7.065S1079.065,371.031,1082.959,371.031z" id="7"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1022.25,452.854 c3.89,0,7.064-3.172,7.064-7.063c0-3.89-3.175-7.065-7.064-7.065c-3.893,0-7.065,3.175-7.065,7.065 C1015.185,449.682,1018.358,452.854,1022.25,452.854z" id="27"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1071.08,591.428 c3.89,0,7.064-3.176,7.064-7.064c0-3.89-3.175-7.063-7.064-7.063c-3.892,0-7.064,3.174-7.064,7.063 C1064.015,588.252,1067.188,591.428,1071.08,591.428z" id="5"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M950.985,603.307 c3.891,0,7.063-3.177,7.063-7.065c0-3.89-3.172-7.063-7.063-7.063s-7.064,3.173-7.064,7.063 C943.92,600.13,947.094,603.307,950.985,603.307z" id="26"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M987.937,715.483 c3.891,0,7.065-3.176,7.065-7.064c0-3.89-3.176-7.063-7.065-7.063c-3.892,0-7.064,3.173-7.064,7.063 S984.045,715.483,987.937,715.483z" id="16"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M896.875,757.057 c3.892,0,7.064-3.174,7.064-7.065c0-3.89-3.172-7.063-7.064-7.063c-3.891,0-7.064,3.173-7.064,7.063 C889.811,753.883,892.985,757.057,896.875,757.057z" id="32"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M750.386,776.192 c3.889,0,7.063-3.173,7.063-7.064c0-3.89-3.173-7.063-7.063-7.063c-3.892,0-7.065,3.174-7.065,7.063 C743.32,773.02,746.494,776.192,750.386,776.192z" id="30"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M627.649,778.832 c3.89,0,7.064-3.173,7.064-7.066c0-3.889-3.174-7.062-7.064-7.062c-3.89,0-7.064,3.173-7.064,7.062 C620.585,775.659,623.759,778.832,627.649,778.832z" id="29"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M767.542,600.666 c3.891,0,7.063-3.173,7.063-7.064c0-3.891-3.172-7.063-7.063-7.063c-3.892,0-7.064,3.173-7.064,7.063 C760.478,597.493,763.65,600.666,767.542,600.666z" id="45"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M519.43,793.349 c3.891,0,7.064-3.173,7.064-7.064c0-3.891-3.173-7.063-7.064-7.063c-3.889,0-7.063,3.173-7.063,7.063 C512.367,790.176,515.541,793.349,519.43,793.349z" id="19"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M500.955,571.632 c3.89,0,7.064-3.176,7.064-7.064c0-3.891-3.174-7.063-7.064-7.063c-3.891,0-7.065,3.173-7.065,7.063 C493.89,568.456,497.065,571.632,500.955,571.632z" id="15"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M419.132,406.664 c3.892,0,7.064-3.173,7.064-7.064c0-3.89-3.172-7.065-7.064-7.065c-3.891,0-7.065,3.175-7.065,7.065 C412.067,403.491,415.241,406.664,419.132,406.664z" id="18"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M425.729,268.09 c3.891,0,7.063-3.173,7.063-7.064c0-3.89-3.172-7.063-7.063-7.063c-3.89,0-7.064,3.174-7.064,7.063 C418.666,264.917,421.839,268.09,425.729,268.09z" id="1"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M605.214,283.927 c3.89,0,7.063-3.173,7.063-7.063c0-3.891-3.173-7.065-7.063-7.065c-3.891,0-7.065,3.174-7.065,7.065 C598.149,280.753,601.324,283.927,605.214,283.927z" id="2"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M751.705,235.096 c3.891,0,7.063-3.173,7.063-7.062c0-3.892-3.173-7.065-7.063-7.065c-3.891,0-7.065,3.175-7.065,7.065 C744.64,231.923,747.814,235.096,751.705,235.096z" id="4"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M961.404,246.501 c3.892,0,7.064-3.173,7.064-7.062c0-3.891-3.174-7.065-7.064-7.065c-3.889,0-7.063,3.175-7.063,7.065 C954.341,243.328,957.515,246.501,961.404,246.501z" id="12"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1213.611,260.172 c3.891,0,7.064-3.173,7.064-7.063c0-3.892-3.175-7.065-7.064-7.065c-3.893,0-7.064,3.174-7.064,7.065 C1206.547,256.999,1209.719,260.172,1213.611,260.172z" id="14"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1210.972,351.234 c3.891,0,7.063-3.173,7.063-7.064c0-3.889-3.172-7.064-7.063-7.064c-3.893,0-7.064,3.175-7.064,7.064 C1203.907,348.061,1207.08,351.234,1210.972,351.234z" id="41"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1135.747,464.731 c3.889,0,7.063-3.172,7.063-7.063s-3.174-7.065-7.063-7.065c-3.894,0-7.065,3.174-7.065,7.065 C1128.682,461.561,1131.855,464.731,1135.747,464.731z" id="21"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1230.768,492.448 c3.89,0,7.063-3.173,7.063-7.064c0-3.891-3.174-7.065-7.063-7.065c-3.894,0-7.065,3.174-7.065,7.065 S1226.876,492.448,1230.768,492.448z" id="37"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1262.442,661.375 c3.889,0,7.063-3.173,7.063-7.064c0-3.891-3.175-7.063-7.063-7.063c-3.894,0-7.066,3.173-7.066,7.063 C1255.376,658.202,1258.549,661.375,1262.442,661.375z" id="23"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1160.822,678.531 c3.891,0,7.063-3.176,7.063-7.065c0-3.889-3.173-7.063-7.063-7.063c-3.893,0-7.064,3.174-7.064,7.063 C1153.758,675.355,1156.93,678.531,1160.822,678.531z" id="47"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1081.638,716.804 c3.89,0,7.065-3.173,7.065-7.065c0-3.89-3.176-7.063-7.065-7.063c-3.893,0-7.064,3.174-7.064,7.063 C1074.573,713.63,1077.745,716.804,1081.638,716.804z" id="49"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1221.53,793.349 c3.889,0,7.063-3.173,7.063-7.064c0-3.891-3.174-7.063-7.063-7.063c-3.893,0-7.066,3.173-7.066,7.063 C1214.464,790.176,1217.639,793.349,1221.53,793.349z" id="17"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1134.428,830.962 c3.889,0,7.062-3.174,7.062-7.065c0-3.89-3.174-7.063-7.062-7.063c-3.893,0-7.065,3.173-7.065,7.063 C1127.362,827.788,1130.536,830.962,1134.428,830.962z" id="48"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1051.073,826.683 c3.89,0,7.064-3.173,7.064-7.063c0-3.893-3.176-7.064-7.064-7.064c-3.893,0-7.064,3.173-7.064,7.064 C1044.008,823.51,1047.181,826.683,1051.073,826.683z" id="34"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M950.985,843.499 c3.891,0,7.063-3.174,7.063-7.064s-3.172-7.063-7.063-7.063s-7.064,3.174-7.064,7.063 C943.92,840.326,947.094,843.499,950.985,843.499z" id="44"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M826.929,844.818 c3.891,0,7.064-3.176,7.064-7.063c0-3.891-3.174-7.063-7.064-7.063c-3.89,0-7.064,3.174-7.064,7.063 C819.865,841.643,823.039,844.818,826.929,844.818z" id="50"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M676.48,851.419 c3.89,0,7.063-3.174,7.063-7.066c0-3.889-3.172-7.063-7.063-7.063c-3.891,0-7.065,3.174-7.065,7.063 C669.415,848.245,672.589,851.419,676.48,851.419z" id="39"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M456.084,747.158 c3.891,0,7.063-3.173,7.063-7.065c0-3.89-3.172-7.063-7.063-7.063c-3.891,0-7.065,3.173-7.065,7.063 C449.02,743.985,452.194,747.158,456.084,747.158z" id="25"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M432.33,622.442 c3.891,0,7.063-3.174,7.063-7.065c0-3.89-3.173-7.063-7.063-7.063s-7.065,3.173-7.065,7.063 C425.264,619.271,428.438,622.442,432.33,622.442z" id="22"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M425.729,494.427 c3.891,0,7.063-3.172,7.063-7.064c0-3.891-3.172-7.065-7.063-7.065c-3.89,0-7.064,3.174-7.064,7.065 C418.666,491.255,421.839,494.427,425.729,494.427z" id="35"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M415.172,827.662 c3.889,0,7.063-3.173,7.063-7.065c0-3.89-3.173-7.062-7.063-7.062c-3.891,0-7.065,3.173-7.065,7.062 C408.107,824.489,411.282,827.662,415.172,827.662z" id="8"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1197.774,570.313 c3.891,0,7.063-3.176,7.063-7.064c0-3.891-3.174-7.063-7.063-7.063c-3.892,0-7.064,3.172-7.064,7.063 C1190.71,567.137,1193.883,570.313,1197.774,570.313z" id="46"></path>
</svg>
</div>最佳答案
我已将您的示例路径放入名为 paths 的数组中。 connectAll 函数遍历所有这些路径。对于每条路径，它遍历所有路径段，将 ID 为 n 的点连接到 ID 为 n+1 的点。
当前代码确实通过所有指示的 id 绘制了一个连接。然而，它始终以垂直线开始，朝向下一个点，并且在每个路径段中始终恰好有 2 个“弯头”。这与您在问题中绘制的图像不同。为了让代码实现像您在该图像中绘制的那样的路径，drawPath 函数需要进行大量重写，我在这里没有完成。该重写将需要，例如，一个路径段的确切性质取决于前一路径段的确切性质。这是一个比我在这里解决的更复杂的场景。但是，我在这里提供的解决方案至少为您提供了一个起点，即能够遍历所有路径，然后针对每条路径遍历所有路径段。
//helper functions, it turned out chrome doesn't support Math.sgn()
function signum(x) {
return (x < 0) ? -1 : 1;
}
function absolute(x) {
return (x < 0) ? -x : x;
}
function drawPath(svg, path, startX, startY, endX, endY) {
// get the path's stroke width (if one wanted to be really precize, one could use half the stroke size)
var stroke = parseFloat(path.attr("stroke-width"));
// check if the svg is big enough to draw the path, if not, set heigh/width
if (svg.attr("height") < endY) svg.attr("height", endY);
if (svg.attr("width" ) < (startX + stroke) ) svg.attr("width", (startX + stroke));
if (svg.attr("width" ) < (endX + stroke) ) svg.attr("width", (endX + stroke));
var deltaX = (endX - startX) * 0.15;
var deltaY = (endY - startY) * 0.15;
// for further calculations which ever is the shortest distance
var delta = deltaY < absolute(deltaX) ? deltaY : absolute(deltaX);
// set sweep-flag (counter/clock-wise)
// if start element is closer to the left edge,
// draw the first arc counter-clockwise, and the second one clock-wise
var arc1 = 0; var arc2 = 1;
if (startX > endX) {
arc1 = 1;
arc2 = 0;
}
// draw tha pipe-like path
// 1. move a bit down, 2. arch, 3. move a bit to the right, 4.arch, 5. move down to the end
path.attr("d", path.attr("d") + "M" + startX + " " + startY +
" V" + (startY + delta) +
" A" + delta + " " + delta + " 0 0 " + arc1 + " " + (startX + delta*signum(deltaX)) + " " + (startY + 2*delta) +
" H" + (endX - delta*signum(deltaX)) +
" A" + delta + " " + delta + " 0 0 " + arc2 + " " + endX + " " + (startY + 3*delta) +
" V" + endY );
}
function connectElements(svg, path, startElem, endElem) {
var svgContainer= $("#svgContainer");
// if first element is lower than the second, swap!
if(startElem.offset().top > endElem.offset().top){
var temp = startElem;
startElem = endElem;
endElem = temp;
}
// get (top, left) corner coordinates of the svg container
var svgTop = svgContainer.offset().top;
var svgLeft = svgContainer.offset().left;
// get (top, left) coordinates for the two elements
var startCoord = startElem.offset();
var endCoord = endElem.offset();
// calculate path's start (x,y) coords
// we want the x coordinate to visually result in the element's mid point
var startX = startCoord.left + 0.5*startElem.outerWidth() - svgLeft; // x = left offset + 0.5*width - svg's left offset
var startY = startCoord.top + startElem.outerHeight() - svgTop; // y = top offset + height - svg's top offset
// calculate path's end (x,y) coords
var endX = endCoord.left + 0.5*endElem.outerWidth() - svgLeft;
var endY = endCoord.top - svgTop;
// call function for drawing the path
drawPath(svg, path, startX, startY, endX, endY);
}
var paths = [
['1', '3', '5', '8'],
['2', '6', '12', '15'],
['4', '7', '10', '13'],
['11', '17', '22', '26'],
['14', '21', '25', '30']
];
function connectAll() {
//connect all the paths you want!
var numPaths = paths.length;
for (var pathNum = 0; pathNum < numPaths; pathNum += 1) {
var path = paths[pathNum];
var numPathSegments = path.length - 1;
for (var segmentNum = 0; segmentNum < numPathSegments; segmentNum += 1) {
connectElements(
$("#svg1"),
$("#path" + pathNum),
$("#" + path[segmentNum]),
$("#" + path[segmentNum + 1])
);
}
}
}
$(document).ready(function() {
// reset svg each time
$("#svg1").attr("height", "0");
$("#svg1").attr("width", "0");
connectAll();
});
$(window).resize(function () {
// reset svg each time
$("#svg1").attr("height", "0");
$("#svg1").attr("width", "0");
connectAll();
});body{ background-color:#fff; }
#svgContainer {
z-index: -10;
position:absolute;
background-color:silver;
opacity: 0.5;
}
#outer{
margin:0 auto;
width: 80%;
}
#teal{
width: 6em;
height: 6em;
background-color:teal;
margin-left: 10%;
}
#orange{
height: 4em;
width: 35%;
padding: 2em 8em;
margin-left: 8em;
margin-top: 6em;
background-color: orange;
}
#red{
width:6em;
height: 4em;
margin-left: 30%;
padding:4em 3em;
background-color:red;
}
#aqua{
width: 5em;
height: 5em;
margin-left:15%;
background-color:aqua;
}
#purple{
width: 15em;
height: 5em;
background-color:purple;
}
#green{
width: 5em;
height: 7em;
margin-top: 2em;
margin-left: 50%;
background-color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgContainer" style="margin: 50px 50px;">
<svg id="svg1" width="0" height="0" >
<path id="path0" d="M0 0" stroke="#E80C0C" fill="none" stroke-width="5px";/>
<path id="path1" d="M0 0" stroke="#01634C" fill="none" stroke-width="5px";/>
<path id="path2" d="M0 0" stroke="#010D63" fill="none" stroke-width="5px";/>
<path id="path3" d="M0 0" stroke="#520163" fill="none" stroke-width="5px";/>
<path id="path4" d="M0 0" stroke="#017F0D" fill="none" stroke-width="5px";/>
<path id="path5" d="M0 0" stroke="#80D309" fill="none" stroke-width="5px";/>
<path id="path6" d="M0 0" stroke="#192B01" fill="none" stroke-width="5px";/>
<path id="path7" d="M0 0" stroke="#8C3B03" fill="none" stroke-width="5px";/>
<path id="path8" d="M0 0" stroke="#03858C" fill="none" stroke-width="5px";/>
<path id="path9" d="M0 0" stroke="#EA4606" fill="none" stroke-width="5px";/>
<path id="path10" d="M0 0" stroke="#EA062C" fill="none" stroke-width="5px";/>
<path id="path11" d="M0 0" stroke="#01193A" fill="none" stroke-width="5px";/>
</svg>
</div>
<div id= "outer">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1172.745px" height="684.151px" viewBox="408 197.925 1172.745 684.151" enable-background="new 408 197.925 1172.745 684.151" xml:space="preserve">
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M509.531,337.377 c3.892,0,7.064-3.174,7.064-7.064c0-3.891-3.172-7.064-7.064-7.064c-3.89,0-7.063,3.173-7.063,7.064 S505.641,337.377,509.531,337.377z" id="38"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M631.609,411.941 c3.89,0,7.064-3.172,7.064-7.063c0-3.89-3.175-7.064-7.064-7.064c-3.891,0-7.065,3.174-7.065,7.064 C624.544,408.769,627.718,411.941,631.609,411.941z" id="31"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M524.71,454.175 c3.89,0,7.063-3.173,7.063-7.064s-3.174-7.065-7.063-7.065c-3.891,0-7.065,3.175-7.065,7.065S520.819,454.175,524.71,454.175z" id="9"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M602.574,526.761 c3.892,0,7.064-3.174,7.064-7.064c0-3.891-3.173-7.065-7.064-7.065c-3.89,0-7.063,3.175-7.063,7.065 C595.511,523.587,598.684,526.761,602.574,526.761z" id="36"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M526.69,683.811 c3.891,0,7.063-3.173,7.063-7.065c0-3.89-3.172-7.063-7.063-7.063c-3.891,0-7.065,3.173-7.065,7.063 C519.625,680.638,522.799,683.811,526.69,683.811z" id="6"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M652.725,679.191 c3.889,0,7.063-3.176,7.063-7.065s-3.173-7.063-7.063-7.063c-3.892,0-7.065,3.173-7.065,7.063 C645.659,676.016,648.833,679.191,652.725,679.191z" id="42"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M688.357,569.653 c3.89,0,7.063-3.176,7.063-7.066c0-3.889-3.173-7.063-7.063-7.063c-3.891,0-7.065,3.174-7.065,7.063 C681.292,566.478,684.466,569.653,688.357,569.653z" id="24"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M758.304,435.039 c3.891,0,7.063-3.173,7.063-7.064c0-3.891-3.173-7.063-7.063-7.063c-3.892,0-7.064,3.173-7.064,7.063 S754.413,435.039,758.304,435.039z" id="3"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M861.243,527.42 c3.891,0,7.063-3.173,7.063-7.063c0-3.891-3.173-7.065-7.063-7.065c-3.891,0-7.065,3.175-7.065,7.065 C854.178,524.247,857.352,527.42,861.243,527.42z" id="43"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M828.249,665.334 c3.891,0,7.064-3.175,7.064-7.064s-3.174-7.063-7.064-7.063c-3.89,0-7.064,3.174-7.064,7.063S824.359,665.334,828.249,665.334z" id="10"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M708.153,332.757 c3.892,0,7.064-3.173,7.064-7.063c0-3.891-3.173-7.065-7.064-7.065c-3.89,0-7.063,3.174-7.063,7.065 C701.089,329.584,704.263,332.757,708.153,332.757z" id="33"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M881.039,286.567 c3.89,0,7.063-3.172,7.063-7.063s-3.174-7.065-7.063-7.065c-3.892,0-7.065,3.175-7.065,7.065S877.147,286.567,881.039,286.567z" id="11"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M862.563,364.431 c3.891,0,7.063-3.173,7.063-7.063c0-3.89-3.173-7.063-7.063-7.063s-7.064,3.173-7.064,7.063 C855.498,361.258,858.671,364.431,862.563,364.431z" id="28"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M912.712,440.976 c3.891,0,7.064-3.171,7.064-7.063s-3.173-7.065-7.064-7.065s-7.063,3.174-7.063,7.065S908.821,440.976,912.712,440.976z" id="20"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M977.38,356.512 c3.89,0,7.062-3.172,7.062-7.063c0-3.891-3.173-7.065-7.062-7.065c-3.894,0-7.065,3.174-7.065,7.065 C970.314,353.34,973.486,356.512,977.38,356.512z" id="40"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1066.462,279.968 c3.889,0,7.062-3.173,7.062-7.063s-3.173-7.064-7.062-7.064c-3.893,0-7.065,3.174-7.065,7.064 C1059.396,276.794,1062.569,279.968,1066.462,279.968z" id="13"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1082.959,371.031 c3.89,0,7.063-3.173,7.063-7.063s-3.175-7.065-7.063-7.065c-3.894,0-7.065,3.174-7.065,7.065S1079.065,371.031,1082.959,371.031z" id="7"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1022.25,452.854 c3.89,0,7.064-3.172,7.064-7.063c0-3.89-3.175-7.065-7.064-7.065c-3.893,0-7.065,3.175-7.065,7.065 C1015.185,449.682,1018.358,452.854,1022.25,452.854z" id="27"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1071.08,591.428 c3.89,0,7.064-3.176,7.064-7.064c0-3.89-3.175-7.063-7.064-7.063c-3.892,0-7.064,3.174-7.064,7.063 C1064.015,588.252,1067.188,591.428,1071.08,591.428z" id="5"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M950.985,603.307 c3.891,0,7.063-3.177,7.063-7.065c0-3.89-3.172-7.063-7.063-7.063s-7.064,3.173-7.064,7.063 C943.92,600.13,947.094,603.307,950.985,603.307z" id="26"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M987.937,715.483 c3.891,0,7.065-3.176,7.065-7.064c0-3.89-3.176-7.063-7.065-7.063c-3.892,0-7.064,3.173-7.064,7.063 S984.045,715.483,987.937,715.483z" id="16"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M896.875,757.057 c3.892,0,7.064-3.174,7.064-7.065c0-3.89-3.172-7.063-7.064-7.063c-3.891,0-7.064,3.173-7.064,7.063 C889.811,753.883,892.985,757.057,896.875,757.057z" id="32"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M750.386,776.192 c3.889,0,7.063-3.173,7.063-7.064c0-3.89-3.173-7.063-7.063-7.063c-3.892,0-7.065,3.174-7.065,7.063 C743.32,773.02,746.494,776.192,750.386,776.192z" id="30"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M627.649,778.832 c3.89,0,7.064-3.173,7.064-7.066c0-3.889-3.174-7.062-7.064-7.062c-3.89,0-7.064,3.173-7.064,7.062 C620.585,775.659,623.759,778.832,627.649,778.832z" id="29"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M767.542,600.666 c3.891,0,7.063-3.173,7.063-7.064c0-3.891-3.172-7.063-7.063-7.063c-3.892,0-7.064,3.173-7.064,7.063 C760.478,597.493,763.65,600.666,767.542,600.666z" id="45"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M519.43,793.349 c3.891,0,7.064-3.173,7.064-7.064c0-3.891-3.173-7.063-7.064-7.063c-3.889,0-7.063,3.173-7.063,7.063 C512.367,790.176,515.541,793.349,519.43,793.349z" id="19"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M500.955,571.632 c3.89,0,7.064-3.176,7.064-7.064c0-3.891-3.174-7.063-7.064-7.063c-3.891,0-7.065,3.173-7.065,7.063 C493.89,568.456,497.065,571.632,500.955,571.632z" id="15"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M419.132,406.664 c3.892,0,7.064-3.173,7.064-7.064c0-3.89-3.172-7.065-7.064-7.065c-3.891,0-7.065,3.175-7.065,7.065 C412.067,403.491,415.241,406.664,419.132,406.664z" id="18"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M425.729,268.09 c3.891,0,7.063-3.173,7.063-7.064c0-3.89-3.172-7.063-7.063-7.063c-3.89,0-7.064,3.174-7.064,7.063 C418.666,264.917,421.839,268.09,425.729,268.09z" id="1"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M605.214,283.927 c3.89,0,7.063-3.173,7.063-7.063c0-3.891-3.173-7.065-7.063-7.065c-3.891,0-7.065,3.174-7.065,7.065 C598.149,280.753,601.324,283.927,605.214,283.927z" id="2"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M751.705,235.096 c3.891,0,7.063-3.173,7.063-7.062c0-3.892-3.173-7.065-7.063-7.065c-3.891,0-7.065,3.175-7.065,7.065 C744.64,231.923,747.814,235.096,751.705,235.096z" id="4"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M961.404,246.501 c3.892,0,7.064-3.173,7.064-7.062c0-3.891-3.174-7.065-7.064-7.065c-3.889,0-7.063,3.175-7.063,7.065 C954.341,243.328,957.515,246.501,961.404,246.501z" id="12"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1213.611,260.172 c3.891,0,7.064-3.173,7.064-7.063c0-3.892-3.175-7.065-7.064-7.065c-3.893,0-7.064,3.174-7.064,7.065 C1206.547,256.999,1209.719,260.172,1213.611,260.172z" id="14"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1210.972,351.234 c3.891,0,7.063-3.173,7.063-7.064c0-3.889-3.172-7.064-7.063-7.064c-3.893,0-7.064,3.175-7.064,7.064 C1203.907,348.061,1207.08,351.234,1210.972,351.234z" id="41"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1135.747,464.731 c3.889,0,7.063-3.172,7.063-7.063s-3.174-7.065-7.063-7.065c-3.894,0-7.065,3.174-7.065,7.065 C1128.682,461.561,1131.855,464.731,1135.747,464.731z" id="21"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1230.768,492.448 c3.89,0,7.063-3.173,7.063-7.064c0-3.891-3.174-7.065-7.063-7.065c-3.894,0-7.065,3.174-7.065,7.065 S1226.876,492.448,1230.768,492.448z" id="37"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1262.442,661.375 c3.889,0,7.063-3.173,7.063-7.064c0-3.891-3.175-7.063-7.063-7.063c-3.894,0-7.066,3.173-7.066,7.063 C1255.376,658.202,1258.549,661.375,1262.442,661.375z" id="23"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1160.822,678.531 c3.891,0,7.063-3.176,7.063-7.065c0-3.889-3.173-7.063-7.063-7.063c-3.893,0-7.064,3.174-7.064,7.063 C1153.758,675.355,1156.93,678.531,1160.822,678.531z" id="47"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1081.638,716.804 c3.89,0,7.065-3.173,7.065-7.065c0-3.89-3.176-7.063-7.065-7.063c-3.893,0-7.064,3.174-7.064,7.063 C1074.573,713.63,1077.745,716.804,1081.638,716.804z" id="49"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1221.53,793.349 c3.889,0,7.063-3.173,7.063-7.064c0-3.891-3.174-7.063-7.063-7.063c-3.893,0-7.066,3.173-7.066,7.063 C1214.464,790.176,1217.639,793.349,1221.53,793.349z" id="17"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1134.428,830.962 c3.889,0,7.062-3.174,7.062-7.065c0-3.89-3.174-7.063-7.062-7.063c-3.893,0-7.065,3.173-7.065,7.063 C1127.362,827.788,1130.536,830.962,1134.428,830.962z" id="48"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1051.073,826.683 c3.89,0,7.064-3.173,7.064-7.063c0-3.893-3.176-7.064-7.064-7.064c-3.893,0-7.064,3.173-7.064,7.064 C1044.008,823.51,1047.181,826.683,1051.073,826.683z" id="34"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M950.985,843.499 c3.891,0,7.063-3.174,7.063-7.064s-3.172-7.063-7.063-7.063s-7.064,3.174-7.064,7.063 C943.92,840.326,947.094,843.499,950.985,843.499z" id="44"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M826.929,844.818 c3.891,0,7.064-3.176,7.064-7.063c0-3.891-3.174-7.063-7.064-7.063c-3.89,0-7.064,3.174-7.064,7.063 C819.865,841.643,823.039,844.818,826.929,844.818z" id="50"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M676.48,851.419 c3.89,0,7.063-3.174,7.063-7.066c0-3.889-3.172-7.063-7.063-7.063c-3.891,0-7.065,3.174-7.065,7.063 C669.415,848.245,672.589,851.419,676.48,851.419z" id="39"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M456.084,747.158 c3.891,0,7.063-3.173,7.063-7.065c0-3.89-3.172-7.063-7.063-7.063c-3.891,0-7.065,3.173-7.065,7.063 C449.02,743.985,452.194,747.158,456.084,747.158z" id="25"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M432.33,622.442 c3.891,0,7.063-3.174,7.063-7.065c0-3.89-3.173-7.063-7.063-7.063s-7.065,3.173-7.065,7.063 C425.264,619.271,428.438,622.442,432.33,622.442z" id="22"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M425.729,494.427 c3.891,0,7.063-3.172,7.063-7.064c0-3.891-3.172-7.065-7.063-7.065c-3.89,0-7.064,3.174-7.064,7.065 C418.666,491.255,421.839,494.427,425.729,494.427z" id="35"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M415.172,827.662 c3.889,0,7.063-3.173,7.063-7.065c0-3.89-3.173-7.062-7.063-7.062c-3.891,0-7.065,3.173-7.065,7.062 C408.107,824.489,411.282,827.662,415.172,827.662z" id="8"></path>
<path fill="#000002" stroke="#000002" stroke-width="0.216" stroke-miterlimit="2.6131" d="M1197.774,570.313 c3.891,0,7.063-3.176,7.063-7.064c0-3.891-3.174-7.063-7.063-7.063c-3.892,0-7.064,3.172-7.064,7.063 C1190.71,567.137,1193.883,570.313,1197.774,570.313z" id="46"></path>
</svg>
</div>关于jquery - 如何从数组中获取值(节点 ID)并在 SVG 中绘制 Accordion 线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45012944/