InteractiveSVG.js/interactiveSVG.css at master · petercollingridge/InteractiveSVG.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.interactiveSVG .background {
    fill: #f8f8f8;
}

/*  Elements can be points (filled) or lines */
.interactiveSVG .point {
    stroke: #f8f8f8;
    stroke-width: 1;
}

.interactiveSVG .line {
    fill: none;
    stroke-width: 2;
}

/*  Color of element determined by role:
    Orange: draggable, can be dragged directly,
    Blue: controllable, moved indrectly by draggable elements,
    Green: generated, positioned determined by position of other elements
    Pink: highlight,
    Grey: static
*/

.draggable {
    cursor: pointer
}

.interactiveSVG .draggable-point {
    fill: rgb(255, 165, 0);
    stroke: #f8f8f8;
    stroke-width: 1;
}

.interactiveSVG .draggable-line {
    stroke: rgb(255, 165, 0);
    stroke-width: 3;
}

.interactiveSVG .highlight-point {
    fill: rgb(255, 0, 175);
}

.interactiveSVG .highlight-line {
    stroke: rgb(255, 0, 175);
}

.interactiveSVG .controllable-point {
    fill: rgb(64, 95, 237);
    pointer-events: none;
}

.interactiveSVG .controllable-line {
    stroke: rgb(64, 95, 237);
}

.interactiveSVG .generated-point {
    fill: rgb(28, 173, 123);
    pointer-events: none;
}

.interactiveSVG .generated-line {
    stroke: rgb(28, 173, 123);
}

.interactiveSVG .static-point {
    fill: rgb(120, 120, 120);
    pointer-events: none;
}

.interactiveSVG .static-line {
    stroke: rgb(120, 120, 120);
    stroke-width: 1px;
    pointer-events: none;
}