使用 CSS 样式化 jsPlumb 轮廓答案

【问题标题】：Styling jsPlumb outline using CSS使用 CSS 样式化 jsPlumb 轮廓
【发布时间】：2015-02-24 07:46:20
【问题描述】：

我们使用“通过 CSS 设置样式”来设置连接器的样式，但是 CSS 中的颜色似乎覆盖了轮廓颜色和连接器颜色。我们使用的选择器如下：

svg.fs-connector path {
    stroke: lightgray;
    fill: lightgray;
    stroke-width: 3;
}

svg.fs-connector-hover path {
    stroke: gray;
    fill: gray;
    stroke-width: 3;
}

其中 fs-connector 和 fs-connector-hover 是我们在创建端点时分配的 cssClass。

css 选择器有什么方法可以定位连接器的 svg 路径及其覆盖（箭头），但将轮廓 svg 路径保留为默认值中指定的原始颜色（或者更好，有没有办法单独设置轮廓颜色）？

【问题讨论】：

你能创建一个小提琴来演示这个问题吗？
jsfiddle.net/01z5sknq/2 如果取消注释 css，您会看到带有白色轮廓的黑色连接器将被带有绿色轮廓的绿色连接器替换，因此基本上连接器笔划宽度变为连接器的宽度加上轮廓的宽度，你就不会在它们交叉的地方看到漂亮的“中断”（这是轮廓颜色给你的）
道歉 - 请改用这个版本 - jsfiddle.net/01z5sknq/5

标签： css jsplumb

【解决方案1】：

jsPlumb 当前版本 (1.7.4) 通过使用不同的笔画和笔画宽度样式 (see line 11571) 绘制两个相同的 SVG 路径，一个在另一个之上，为连接器实现了 PaintStyle 的 outlineColor 和 outlineWidth 属性。这些路径元素属于一个具有类的 svg 元素，如您的情况下的“fs-connector”，见下图：

因此，您可以一次将 stroke 和 stroke-width 属性应用于两个路径。回答您的问题“有没有办法单独设置轮廓颜色的样式？” - 使用 CSS 样式，你不能。

【讨论】：