.image-top {
    position: absolute;
    overflow: auto;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.image-item {
    position: absolute;
    background: transparent;
}
.image-svg-shape {
    stroke: black;
    stroke-width: 1px;
    stroke-dasharray: 3 1;
    fill: transparent;  /* must have fill to respond to mouse -- cannot use "none" */
    vector-effect: non-scaling-stroke;
}
.image-svg-shape-selected {
    stroke: blue;
    stroke-width: 2px;
    stroke-dasharray: unset;
    visibility: visible;
}
.image-svg-nomouse {
    pointer-events: none;
}
.image-svg-point {
    stroke: black;
    stroke-width: 1px;
    fill: white;
    vector-effect: non-scaling-stroke;
}
.image-svg-point:hover {
    stroke-width: 2px;
    fill: pink;
    cursor: move;
}
.image-svg-point-close {
    stroke-width: 2px;
    fill: green;
}
.image-svg-point.image-svg-selected {
    stroke-width: 2px;
    fill: pink;
}
.image-svg-array-bend {
    stroke: 1px;
    fill: green;
    vector-effect: non-scaling-stroke;
}
.image-svg-array-next-bend {
    stroke: 1px;
    fill: orange;
    vector-effect: non-scaling-stroke;
}
.image-svg-array-next-bend:hover {
    cursor: move;
}
.image-svg-square {
    stroke: none;
    fill: red;
    vector-effect: non-scaling-stroke;
}
.image-svg-square:hover {
    stroke: black;
    stroke-width: 2px;
    fill: pink;
}
.image-svg-square-nw:hover, .image-svg-square-se:hover{
    cursor: nwse-resize;
}
.image-svg-square-ne:hover, .image-svg-square-sw:hover{
    cursor: nesw-resize;
}
.image-svg-square-n:hover, .image-svg-square-s:hover{
    cursor: ns-resize;
}
.image-svg-square-w:hover, .image-svg-square-e:hover{
    cursor: ew-resize;
}
.image-svg-polyline {
    stroke: blue;
    stroke-width: 1px;
    fill: none;
    vector-effect: non-scaling-stroke;
}
.image-svg-line.image-svg-selected {
    stroke: red;
    stroke-width: 2px;
}
.image-svg-rectangle-create {
    stroke: blue;
    stroke-width: 2px;
    fill: none;
    vector-effect: non-scaling-stroke;
}
.image-svg-array-create {
    stroke: blue;
    stroke-width: 2px;
    fill: none;
    vector-effect: non-scaling-stroke;
}
.image-svg-box {
    stroke: blue;
    stroke-width: 1px;
    fill: transparent;
    vector-effect: non-scaling-stroke;
}
.image-svg-highlight {
    stroke: black;
    stroke-width: 2px;
    fill: transparent;  /* must have fill to respond to mouse -- cannot use "none" */
    vector-effect: non-scaling-stroke;
}
.image-svg-line-highlight {
    stroke: none;
    fill: #ffdddd;
    mix-blend-mode: color;
    vector-effect: non-scaling-stroke;
}