How do I set the opacity of the connector in jsplumb?
See working code below. Can anyone tell me how to set the opacity of the line connecting the two divs? I couldn't find anything in the documentation about this. I tried to miss setOpacity: 0.5
, opacity: 0.5
and use strokeStyle: rgba(120, 120, 240, 0.4)
as a property in paintStyle
. None of this worked.
Thank you for your help.
Code
<!DOCTYPE html>
<html>
<head>
<title>jsplumb example</title>
<style type="text/css">
.nodes {
border: 2px solid steelblue;
width: 200px;
height: 100px;
}
.div1 {
position: relative;
top: 10%;
left: 10%;
}
.div2 {
position: relative;
top: 20%;
left: 40%;
}
</style>
</head>
<body>
<div class='containerdiv'>
<div class="nodes div1" id="inner1">Inner 1</div>
<div class="nodes div2" id="inner2">Inner 2</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jquery.jsPlumb-1.3.16-all-min.js"></script>
<script type="text/javascript">
jsPlumb.bind("ready", function() {
jsPlumb.connect({
source:"inner1", target:"inner2",
paintStyle: {strokeStyle: 'rgb(120,120,240)', lineWidth: 6}
});
jsPlumb.draggable('inner1');
jsPlumb.draggable('inner2');
});
</script>
</body>
</html>
source to share
There are two options, the first (which I couldn't follow) uses a property connectorClass
to assign a class-name or a space-separated list of class names to connector elements. But as noted, this doesn't seem to work (or I was doing it wrong, which is possible given the timing).
On the other hand, given that svg elements containing connectors have a predictable class name, you can simply simply style that element using CSS:
._jsPlumb_connector {
opacity: 0.5; /* or whatever... */
}
source to share