<div class="generation">
<div id="e3" class="circleContainer">
<svg width="100" height="100">
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
<div id="e4" class="circleContainer">
<svg width="100" height="100">
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
</div>
<div class="generation">
<div id="e1" class="circleContainer">
<svg width="100" height="100">
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
<div id="e2" class="circleContainer">
<svg>
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
<div id="e5" class="circleContainer">
<svg>
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
</div>.circleContainer {
float: left;
height: 100px;
width: 100px;
margin: 20px;
}
.generation{ margin-top: 50px; clear:both;}
#e3 { margin-left:75px;}
svg._jsPlumb_connector path, ._jsPlumb_endpoint circle {
stroke: gray;
fill:gray;
}
circle:hover{
cursor: pointer;
fill: yellow;
stroke:black; jsPlumb.bind("ready", function() {
jsPlumb.connect({
source:"e1",
target:"e3",
connector:[ "Flowchart" ],
anchors:[ "TopCenter", "Bottom"],
endpoint:[ "Rectangle", { width:10, height:10 }, "Rectangle", { width:10, height:8 } ]
});
jsPlumb.connect({
source:"e2",
target:"e3",
connector:[ "Flowchart" ],
anchors:[ "TopCenter", "Bottom"],
endpoint:[ "Rectangle", { width:10, height:10 }, "Rectangle", { width:10, height:8 } ]
});
jsPlumb.connect({
source:"e5",
target:"e3",
connector:[ "Flowchart" ],
anchors:[ "TopCenter", "Bottom"],
endpoint:[ "Rectangle", { width:10, height:10 }, "Rectangle", { width:10, height:8 } ]
});
jsPlumb.connect({
source:"e4",
target:"e3",
connector:[ "Flowchart" ],
anchors:[ "Left", "Right"],
endpoint:[ "Rectangle", { width:10, height:10 }, "Rectangle", { width:10, height:8 } ]
});
});
External CSS
This Pen doesn't use any external CSS resources.