WIP WYSIWYG ~3D SVG editor.
Add contextual cursor changes to canvas elements.
+19
-3
+2
-3
index.html
+2
-3
index.html
···
22
22
<li><button id="add">Add</button></li>
23
23
</menu>
24
24
<div class="canvas-container">
25
+
<svg id="widgets" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
26
+
<svg id="overlay" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
25
27
<svg id="canvas" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
26
-
<svg id="overlay" class="canvas-layer" xmlns="http://www.w3.org/2000/svg">
27
-
<svg id="widgets" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
28
-
</svg>
29
28
<svg id="defs">
30
29
<filter id="better-highlight" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
31
30
<feMorphology operator="dilate" radius="2" result="outer" />
+17
styles.css
+17
styles.css
···
112
112
z-index: 0;
113
113
}
114
114
115
+
#canvas {
116
+
cursor: grab;
117
+
}
118
+
119
+
#overlay ~ #canvas:active {
120
+
cursor: grabbing;
121
+
}
122
+
123
+
#canvas > * {
124
+
cursor: pointer;
125
+
}
126
+
127
+
/* Change to pointer when clicking on canvas would deselect elements */
128
+
#overlay:has(> *) ~ #canvas {
129
+
cursor: pointer;
130
+
}
131
+
115
132
/*
116
133
#canvas .selected {
117
134
filter: drop-shadow(0 0 0.2px #E62)