如何在jsplumb中设置连接线的不透明度？答案

【问题标题】：How to set the opacity of connecting line in jsplumb?如何在jsplumb中设置连接线的不透明度？
【发布时间】：2013-01-28 02:38:28
【问题描述】：

请查看下面的工作代码。有人可以告诉我如何设置连接两个 div 的线的不透明度吗？我在这方面的文档中找不到任何内容。我尝试传递setOpacity: 0.5、opacity: 0.5 并使用strokeStyle: rgba(120, 120, 240, 0.4) 作为paintStyle 中的属性。这些都没有帮助。

感谢您的帮助。

代码

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

【问题讨论】：

标签： css svg jsplumb

【解决方案1】：

有两个选项，第一个选项（我无法使用）是使用connectorClass 属性为连接器元素分配一个类名或一个用空格分隔的类名列表。但是，如前所述，这似乎不起作用（或者我做错了，考虑到时间，这是可能的）。

另一方面，鉴于包含连接器的 svg 元素具有可预测的类名，您可以简单地使用 CSS 直接设置该元素的样式：

._jsPlumb_connector  {
    opacity: 0.5; /* or whatever... */
}

JS Fiddle demo.

【讨论】：

谢谢。 ._jsPlumb_connector 的问题在于它将设置所有连接器的不透明度。但是，您的回答促使我尝试cssClass 属性，效果很好。
好吧，我很高兴能帮上忙……找到cssClass做得很好，我完全错过了！