个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我已经添加了名称为 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/
25
4
0
出现在 python 2.7.8 中。 3.4.1 不会发生这种情况。 示例: >>> id(id) 140117478913736 >>> id(id) 140117478913736 >>> id
好吧，我对动态创建的控件的 ID 很困惑。 Public Class TestClass Inherits Panel Implements INamingContainer
我收到下面的错误，说有堆栈溢出。发生这种情况是因为带有 IN (id, id, id...id) 的 SQL 语句有大量参数。有没有什么办法解决这一问题？这是在我使用 Eclipse 的本地环境中发生
为什么 CPython(不知道其他 Python 实现)有以下行为？ tuple1 = () tuple2 = ()
为什么 CPython(对其他 Python 实现一无所知)有以下行为？ tuple1 = () tuple2 = ()
非常简单的问题:当我有一个持久对象时，它通常有一个名为 ID 的属性(对于抽象类)。 那么..命名约定是ID还是Id？ 例如。 public int ID { get; set; } 或 public
知道为什么我会收到此错误，我已经尝试了所有命名约定(小写/大写) 我正在使用 Vaadin，这是我的代码片段: public class Usercontainer extends BeanI
为什么 CPython(不知道其他 Python 实现)有以下行为？ tuple1 = () tuple2 = ()
我需要改变表的所有主键 UPDATE TODO SET id = id + 1 但我做不到(Demo 来自 Ahmad Al-Mutawa 的回答)描述了原因。主键不能这样改。 我也不能根据这是 sq
我正在尝试列出与用户相关的讨论列表。 想象一下，如果你愿意的话: posts -------------------------------------------------------------
我有一个表，其中包含一些具有自己的 ID 和共享 SKU key 的文章。我尝试使用左连接进行查询，并使用组结果获取从查询返回的所有 id。 我的数据结构是这样的: id - name -
在下表People中: id name 1 James 2 Yun 3 Ethan 如果我想找到最大 ID，我可以运行此查询 select max(id) id from People; 结果是
我正在产品页面上创建评论模块，其中显示垃圾评论选项，并显示 onclick 显示和隐藏弹出窗口。现在它在单个评论中工作正常但是当评论是两个时它同时打开两个因为类是相同的。现在这就是为什么我想要获取父
根据 REST 哲学，PUT操作应该(取自维基百科): PUT http://example.com/resources/142 Update the address member of the co
我想知道如何在使用 PHP 或 JavaScript 进行身份验证后从 Google Analytics 获取 Property Id、View Id 和 Account Id？因为我希望能够将它们存
我想使用所选按钮的 ID 进行删除。但我不知道如何从中获取/获取 id。我尝试了 this.id 但不起作用。 这是我创建按钮的地方: var deleteEmployer= document.cre
我有一个具有以下结构的表“表” ID LinkedWith 12 13 13 12 14 13 15 14 16
请不要在未阅读问题的情况下将问题标记为重复。我确实发布了一个类似的问题，但 STACKOVERFLOW 社区成员要求我单独重新发布修改后的问题，因为考虑到一个小而微妙的修改，解决方案要复杂得多。 假设
在 Android Studio 中，我创建了一个 Person.java 类。我使用Generate 创建了getter 和setter 以及构造函数。 这是我的 Person.java 类: pu
如何在 jQuery 中制作这样的东西: //这是显示的主体 ID //当我悬停 #hover-id 时，我希望 #principal-id 消失并更改 。但是当我将光标放在 #this-id 上时
我是一名优秀的程序员,十分优秀！