如何从数组中获取值（节点ID）并在SVG中绘制线条手风琴？

Question

我添加了数组，其名称为Path1，值为1,3,5,8，如果你看到SVG是id名称，我需要什么，我必须从数组中获取值< / p>

目前代码正在使用起点和终点，但我想要多点。

如果您有任何疑问或问题，请提供帮助并告诉我

提前感谢。

＆＃13;

＆＃13;

//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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我已将您的示例路径放入名为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>