jquery+flowchart实现svg简易流程图效果代码

代码语言:html

所属分类:图表

代码描述:jquery+flowchart实现svg简易流程图效果代码

代码标签: jquery flowchart svg简易 流程图

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
<style>
    /* --- basis elements styling --- */
html,
body {
  position: aboslute;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  ovrflow: hidden;
  background-color: #dfdfdd;
}

#connections-layer {
    z-index: 1;
}

#nodes-layer {
    z-index: 2;
}

.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.layer path {
    fill: none;
    stroke: #000;
    stroke-linecap: round;
    stroke-width: 5;
}

.layer .node {
  position: absolute;
}

/* --- custom nodes styling --- */
.simple-node {
  min-width: 70px;
  min-height: 20px;
  padding: 5px;
  border: 5px solid #000000;
  background-color: #ffffff;
  white-space: nowrap;
}

.expression-node {
  fill:red;
  stroke:black;
  stroke-width:5;
}

.decision-node {
  fill:yellow;
  stroke:black;
  stroke-width:5;
}

#node-actions-dialog {
  font-family: Verdana;.........完整代码请登录后点击上方下载按钮下载查看

网友评论0