Conveyor

This shows a conveyor as we display it in the app.
The state can now be set by the use of the radio buttons and checkboxes.
Normally, the state is set by a message from the NodeJS server.

Below is the SVG code of the conveyor.
Note that there are some Knockout attributes included. This is because, in my project, I use it in combination with Knockout.
Almost all elements discussed in this app are used.

<svg id="conveyor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 900 900"
    class="vis-Vertical vis-State-Stopped vis-Position-Occupied">
    <defs>
        <style>
            /*CSS for flickering effect */
            @keyframes flickerAnimation {
                50% {
                    fill: red;
                }
            }

            @-o-keyframes flickerAnimation {
                50% {
                    fill: red;
                }
            }

            @-moz-keyframes flickerAnimation {
                50% {
                    fill: red;
                }
            }

            @-webkit-keyframes flickerAnimation {
                50% {
                    fill: red;
                }
            }

            /*CSS for click actions*/
                {
                cursor: pointer;
            }

            /*CSS for debug outline*/
            #g-Outline .outline {
                display: none;
            }

            .vis-Debug #g-Outline .outline {
                display: block;
                fill: none;
                stroke: #5184AF;
                stroke-width: 2px;
                stroke-dasharray: 2, 2;
                stroke-linejoin: round;
            }

            /*CSS for Text on conveyor*/
            #g-Position #g-Position-Text {
                font-size: 24px;
            }

            /*CSS for the  state of a conveyor*/
            #g-Group-State rect {
                fill: grey;
            }

            .vis-Group-Automatic #g-Group-State rect {
                fill: black;
            }

            .vis-Group-Stopped #g-Group-State rect {
                fill: grey;
            }

            .vis-Group-Manual #g-Group-State rect {
                fill: brown;
            }

            .vis-Group-Error #g-Group-State rect {
                -webkit-animation: flickerAnimation 1s infinite;
                -moz-animation: flickerAnimation 1s infinite;
                -o-animation: flickerAnimation 1s infinite;
                animation: flickerAnimation 1s infinite;
            }

            /*CSS for the Long Time Failure of a conveyor*/
            #p-ArcedState .arced-base-color {
                fill: black;
            }

            #p-ArcedState rect {
                fill: #fbb03b;
            }

            .vis-Group-MaintenanceMode #p-ArcedState rect {
                fill: #fbb03b;
            }

            .vis-Group-LTF #p-ArcedState rect {
                fill: red;
            }

            .vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State .arced-style,
            .vis-Group-LTF #g-Group #g-Group-LTF_State .arced-style {
                fill: url(#p-ArcedState);
            }

            /*CSS for the element state of a conveyor*/
            #g-Element rect {
                fill: #ffffe6;
            }

            .vis-Element-Error #g-Element rect {
                fill: red;
            }

            /*CSS for the position of the conveyor*/
            #g-Position-Inside rect {
                fill: white;
            }

            .vis-Position-Occupied #g-Position-Inside rect {
                fill: #fbb03b;
            }

            #g-Position-Outside rect {
                fill: #29abe2;
            }

            .vis-Position-Error #g-Position-Outside rect {
                fill: red;
            }

            /*CSS for the type of conveyor*/
            #g-Group rect,
            #g-Element rect {
                display: none;
            }

            #g-Element>* {
                display: inline;
            }

            /*vis-Vertical*/
            .vis-Vertical #g-Element #g-Element-Bottom *,
            .vis-Vertical #g-Element #g-Element-Top *,
            .vis-Vertical #g-Group #g-Group-State #g-Group-State-Right *,
            .vis-Vertical #g-Group #g-Group-State #g-Group-State-Left *,
            .vis-Vertical.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-Left *,
            .vis-Vertical.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-Right *,
            .vis-Vertical.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-Left rect,
            .vis-Vertical.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-Right rect {
                display: inline;
            }

            /*vis-Horizontal*/
            .vis-Horizontal #g-Element #g-Element-Left *,
            .vis-Horizontal #g-Element #g-Element-Right *,
            .vis-Horizontal #g-Group #g-Group-State #g-Group-State-Top *,
            .vis-Horizontal #g-Group #g-Group-State #g-Group-State-Bottom *,
            .vis-Horizontal.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-Top *,
            .vis-Horizontal.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-Bottom *,
            .vis-Horizontal.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-Top *,
            .vis-Horizontal.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-Bottom * {
                display: inline;
            }

            /*vis-TopLeft-Corner*/
            .vis-TopLeft-Corner #g-Element #g-Element-Bottom *,
            .vis-TopLeft-Corner #g-Element #g-Element-Right *,
            .vis-TopLeft-Corner #g-Group #g-Group-State #g-Group-State-Top *,
            .vis-TopLeft-Corner #g-Group #g-Group-State #g-Group-State-Left *,
            .vis-TopLeft-Corner #g-Group #g-Group-State #g-Group-State-BottomRight *,
            .vis-TopLeft-Corner.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-TopLeft *,
            .vis-TopLeft-Corner.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-TopLeft * {
                display: inline;
            }

            /*vis-TopRight-Corner*/
            .vis-TopRight-Corner #g-Element #g-Element-Bottom *,
            .vis-TopRight-Corner #g-Element #g-Element-Left *,
            .vis-TopRight-Corner #g-Group #g-Group-State #g-Group-State-Top *,
            .vis-TopRight-Corner #g-Group #g-Group-State #g-Group-State-Right *,
            .vis-TopRight-Corner #g-Group #g-Group-State #g-Group-State-BottomLeft *,
            .vis-TopRight-Corner.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-TopRight *,
            .vis-TopRight-Corner.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-TopRight * {
                display: inline;
            }

            /*vis-BottomRight-Corner*/
            .vis-BottomRight-Corner #g-Element #g-Element-Top *,
            .vis-BottomRight-Corner #g-Element #g-Element-Left *,
            .vis-BottomRight-Corner #g-Group #g-Group-State #g-Group-State-Bottom *,
            .vis-BottomRight-Corner #g-Group #g-Group-State #g-Group-State-Right *,
            .vis-BottomRight-Corner #g-Group #g-Group-State #g-Group-State-TopLeft *,
            .vis-BottomRight-Corner.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-BottomRight *,
            .vis-BottomRight-Corner.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-BottomRight * {
                display: inline;
            }

            /*vis-BottomLeft-Corner*/
            .vis-BottomLeft-Corner #g-Element #g-Element-Top *,
            .vis-BottomLeft-Corner #g-Element #g-Element-Right *,
            .vis-BottomLeft-Corner #g-Group #g-Group-State #g-Group-State-Bottom *,
            .vis-BottomLeft-Corner #g-Group #g-Group-State #g-Group-State-Left *,
            .vis-BottomLeft-Corner #g-Group #g-Group-State #g-Group-State-TopRight *,
            .vis-BottomLeft-Corner.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-BottomLeft *,
            .vis-BottomLeft-Corner.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-BottomLeft * {
                display: inline;
            }

            /*vis-Top-T*/
            .vis-Top-T #g-Element #g-Element-Left *,
            .vis-Top-T #g-Element #g-Element-Right *,
            .vis-Top-T #g-Element #g-Element-Top *,
            .vis-Top-T #g-Group #g-Group-State #g-Group-State-Bottom *,
            .vis-Top-T #g-Group #g-Group-State #g-Group-State-TopRight *,
            .vis-Top-T #g-Group #g-Group-State #g-Group-State-TopLeft *,
            .vis-Top-T.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-Bottom *,
            .vis-Top-T.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-Bottom * {
                display: inline;
            }

            /*vis-Bottom-T*/
            .vis-Bottom-T #g-Element #g-Element-Left *,
            .vis-Bottom-T #g-Element #g-Element-Right *,
            .vis-Bottom-T #g-Element #g-Element-Bottom *,
            .vis-Bottom-T #g-Group #g-Group-State #g-Group-State-Top *,
            .vis-Bottom-T #g-Group #g-Group-State #g-Group-State-BottomRight *,
            .vis-Bottom-T #g-Group #g-Group-State #g-Group-State-BottomLeft *,
            .vis-Bottom-T.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-Top *,
            .vis-Bottom-T.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-Top * {
                display: inline;
            }

            /*vis-Left-T*/
            .vis-Left-T #g-Element #g-Element-Left *,
            .vis-Left-T #g-Element #g-Element-Top *,
            .vis-Left-T #g-Element #g-Element-Bottom *,
            .vis-Left-T #g-Group #g-Group-State #g-Group-State-Right *,
            .vis-Left-T #g-Group #g-Group-State #g-Group-State-TopLeft *,
            .vis-Left-T #g-Group #g-Group-State #g-Group-State-BottomLeft *,
            .vis-Left-T.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-Right *,
            .vis-Left-T.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-Right * {
                display: inline;
            }

            /*vis-Right-T*/
            .vis-Right-T #g-Element #g-Element-Right *,
            .vis-Right-T #g-Element #g-Element-Top *,
            .vis-Right-T #g-Element #g-Element-Bottom *,
            .vis-Right-T #g-Group #g-Group-State #g-Group-State-Left *,
            .vis-Right-T #g-Group #g-Group-State #g-Group-State-TopRight *,
            .vis-Right-T #g-Group #g-Group-State #g-Group-State-BottomRight *,
            .vis-Right-T.vis-Group-LTF #g-Group #g-Group-LTF_State #g-Group-LTF_State-Left *,
            .vis-Right-T.vis-Group-MaintenanceMode #g-Group #g-Group-LTF_State #g-Group-LTF_State-Left * {
                display: inline;
            }
        </style>

        <pattern id="p-ArcedState" data-name="p-ArcedState" width="100" height="100" patternUnits="userSpaceOnUse"
            viewBox="0 0 100 100">
            <rect width="100" height="100" />
            <rect x="91.89" y="94" width="116" height="114" />
            <polygon class="arced-base-color"
                points="32.72 174.25 25.64 167.18 167.07 25.75 174.14 32.83 32.72 174.25" />
            <polygon class="arced-base-color" points="49.18 190.99 42.11 183.92 183.53 42.5 190.6 49.57 49.18 190.99" />
            <polygon class="arced-base-color" points="65.65 207.74 58.58 200.66 200 59.24 207.07 66.31 65.65 207.74" />
            <polygon class="arced-base-color"
                points="82.12 224.48 75.05 217.41 216.47 75.99 223.54 83.06 82.12 224.48" />
            <polygon class="arced-base-color"
                points="98.59 241.22 91.52 234.15 232.94 92.73 240.01 99.8 98.59 241.22" />
            <polygon class="arced-base-color"
                points="33.12 175.48 26.05 168.41 167.47 26.99 174.54 34.06 33.12 175.48" />
            <polygon class="arced-base-color"
                points="49.59 192.22 42.52 185.15 183.94 43.73 191.01 50.8 49.59 192.22" />
            <polygon class="arced-base-color"
                points="66.05 208.97 58.98 201.9 200.41 60.48 207.48 67.55 66.05 208.97" />
            <polygon class="arced-base-color"
                points="82.52 225.71 75.45 218.64 216.87 77.22 223.94 84.29 82.52 225.71" />
            <polygon class="arced-base-color"
                points="98.99 242.46 91.92 235.39 233.34 93.96 240.41 101.03 98.99 242.46" />
            <rect x="-8.11" y="94" width="116" height="114" />
            <polygon class="arced-base-color"
                points="-67.28 174.25 -74.36 167.18 67.07 25.75 74.14 32.83 -67.28 174.25" />
            <polygon class="arced-base-color"
                points="-50.82 190.99 -57.89 183.92 83.53 42.5 90.61 49.57 -50.82 190.99" />
            <polygon class="arced-base-color"
                points="-34.35 207.74 -41.42 200.66 100 59.24 107.07 66.31 -34.35 207.74" />
            <polygon class="arced-base-color"
                points="-17.88 224.48 -24.95 217.41 116.47 75.99 123.54 83.06 -17.88 224.48" />
            <polygon class="arced-base-color"
                points="-1.41 241.22 -8.48 234.15 132.94 92.73 140.01 99.8 -1.41 241.22" />
            <polygon class="arced-base-color"
                points="-66.88 175.48 -73.95 168.41 67.47 26.99 74.54 34.06 -66.88 175.48" />
            <polygon class="arced-base-color"
                points="-50.41 192.22 -57.48 185.15 83.94 43.73 91.01 50.8 -50.41 192.22" />
            <polygon class="arced-base-color"
                points="-33.95 208.97 -41.02 201.9 100.41 60.48 107.48 67.55 -33.95 208.97" />
            <polygon class="arced-base-color"
                points="-17.48 225.71 -24.55 218.64 116.87 77.22 123.94 84.29 -17.48 225.71" />
            <polygon class="arced-base-color"
                points="-1.01 242.46 -8.08 235.39 133.34 93.96 140.41 101.03 -1.01 242.46" />
            <rect x="-108.11" y="94" width="116" height="114" />
            <polygon class="arced-base-color"
                points="-134.35 207.74 -141.42 200.66 0 59.24 7.07 66.31 -134.35 207.74" />
            <polygon class="arced-base-color"
                points="-117.88 224.48 -124.95 217.41 16.47 75.99 23.54 83.06 -117.88 224.48" />
            <polygon class="arced-base-color"
                points="-101.41 241.22 -108.48 234.15 32.94 92.73 40.01 99.8 -101.41 241.22" />
            <polygon class="arced-base-color"
                points="-133.95 208.97 -141.02 201.9 0.41 60.48 7.48 67.55 -133.95 208.97" />
            <polygon class="arced-base-color"
                points="-117.48 225.71 -124.55 218.64 16.87 77.22 23.94 84.29 -117.48 225.71" />
            <polygon class="arced-base-color"
                points="-101.01 242.46 -108.08 235.39 33.34 93.96 40.41 101.03 -101.01 242.46" />
            <rect x="91.89" y="-6" width="116" height="114" />
            <polygon class="arced-base-color"
                points="32.72 74.25 25.64 67.17 167.07 -74.25 174.14 -67.17 32.72 74.25" />
            <polygon class="arced-base-color" points="49.18 90.99 42.11 83.92 183.53 -57.5 190.6 -50.43 49.18 90.99" />
            <polygon class="arced-base-color"
                points="65.65 107.73 58.58 100.66 200 -40.76 207.07 -33.69 65.65 107.73" />
            <polygon class="arced-base-color"
                points="82.12 124.48 75.05 117.41 216.47 -24.01 223.54 -16.94 82.12 124.48" />
            <polygon class="arced-base-color"
                points="98.59 141.22 91.52 134.15 232.94 -7.27 240.01 -0.2 98.59 141.22" />
            <polygon class="arced-base-color"
                points="33.12 75.48 26.05 68.41 167.47 -73.01 174.54 -65.94 33.12 75.48" />
            <polygon class="arced-base-color" points="49.59 92.22 42.52 85.15 183.94 -56.27 191.01 -49.2 49.59 92.22" />
            <polygon class="arced-base-color"
                points="66.05 108.97 58.98 101.9 200.41 -39.52 207.48 -32.45 66.05 108.97" />
            <polygon class="arced-base-color"
                points="82.52 125.71 75.45 118.64 216.87 -22.78 223.94 -15.71 82.52 125.71" />
            <polygon class="arced-base-color"
                points="98.99 142.46 91.92 135.39 233.34 -6.04 240.41 1.03 98.99 142.46" />
            <rect x="-8.11" y="-6" width="116" height="114" />
            <polygon class="arced-base-color"
                points="-67.28 74.25 -74.36 67.17 67.07 -74.25 74.14 -67.17 -67.28 74.25" />
            <polygon class="arced-base-color"
                points="-50.82 90.99 -57.89 83.92 83.53 -57.5 90.61 -50.43 -50.82 90.99" />
            <polygon class="arced-base-color"
                points="-34.35 107.73 -41.42 100.66 100 -40.76 107.07 -33.69 -34.35 107.73" />
            <polygon class="arced-base-color"
                points="-17.88 124.48 -24.95 117.41 116.47 -24.01 123.54 -16.94 -17.88 124.48" />
            <polygon class="arced-base-color"
                points="-1.41 141.22 -8.48 134.15 132.94 -7.27 140.01 -0.2 -1.41 141.22" />
            <polygon class="arced-base-color" points="15.05 157.97 7.98 150.9 149.41 9.48 156.48 16.55 15.05 157.97" />
            <polygon class="arced-base-color"
                points="31.52 174.71 24.45 167.64 165.87 26.22 172.94 33.29 31.52 174.71" />
            <polygon class="arced-base-color"
                points="-66.88 75.48 -73.95 68.41 67.47 -73.01 74.54 -65.94 -66.88 75.48" />
            <polygon class="arced-base-color"
                points="-50.41 92.22 -57.48 85.15 83.94 -56.27 91.01 -49.2 -50.41 92.22" />
            <polygon class="arced-base-color"
                points="-33.95 108.97 -41.02 101.9 100.41 -39.52 107.48 -32.45 -33.95 108.97" />
            <polygon class="arced-base-color"
                points="-17.48 125.71 -24.55 118.64 116.87 -22.78 123.94 -15.71 -17.48 125.71" />
            <polygon class="arced-base-color"
                points="-1.01 142.46 -8.08 135.39 133.34 -6.04 140.41 1.03 -1.01 142.46" />
            <polygon class="arced-base-color" points="15.46 159.2 8.39 152.13 149.81 10.71 156.88 17.78 15.46 159.2" />
            <polygon class="arced-base-color"
                points="31.93 175.94 24.86 168.87 166.28 27.45 173.35 34.52 31.93 175.94" />
            <rect x="-108.11" y="-6" width="116" height="114" />
            <polygon class="arced-base-color"
                points="-134.35 107.73 -141.42 100.66 0 -40.76 7.07 -33.69 -134.35 107.73" />
            <polygon class="arced-base-color"
                points="-117.88 124.48 -124.95 117.41 16.47 -24.01 23.54 -16.94 -117.88 124.48" />
            <polygon class="arced-base-color"
                points="-101.41 141.22 -108.48 134.15 32.94 -7.27 40.01 -0.2 -101.41 141.22" />
            <polygon class="arced-base-color"
                points="-84.95 157.97 -92.02 150.9 49.41 9.48 56.48 16.55 -84.95 157.97" />
            <polygon class="arced-base-color"
                points="-68.48 174.71 -75.55 167.64 65.87 26.22 72.94 33.29 -68.48 174.71" />
            <polygon class="arced-base-color"
                points="-133.95 108.97 -141.02 101.9 0.41 -39.52 7.48 -32.45 -133.95 108.97" />
            <polygon class="arced-base-color"
                points="-117.48 125.71 -124.55 118.64 16.87 -22.78 23.94 -15.71 -117.48 125.71" />
            <polygon class="arced-base-color"
                points="-101.01 142.46 -108.08 135.39 33.34 -6.04 40.41 1.03 -101.01 142.46" />
            <polygon class="arced-base-color"
                points="-84.54 159.2 -91.61 152.13 49.81 10.71 56.88 17.78 -84.54 159.2" />
            <polygon class="arced-base-color"
                points="-68.07 175.94 -75.14 168.87 66.28 27.45 73.35 34.52 -68.07 175.94" />
            <rect x="91.89" y="-106" width="116" height="114" />
            <polygon class="arced-base-color" points="65.65 7.74 58.58 0.66 200 -140.76 207.07 -133.69 65.65 7.74" />
            <polygon class="arced-base-color"
                points="82.12 24.48 75.05 17.41 216.47 -124.01 223.54 -116.94 82.12 24.48" />
            <polygon class="arced-base-color"
                points="98.59 41.22 91.52 34.15 232.94 -107.27 240.01 -100.2 98.59 41.22" />
            <polygon class="arced-base-color" points="66.05 8.97 58.98 1.9 200.41 -139.52 207.48 -132.45 66.05 8.97" />
            <polygon class="arced-base-color"
                points="82.52 25.71 75.45 18.64 216.87 -122.78 223.94 -115.71 82.52 25.71" />
            <polygon class="arced-base-color"
                points="98.99 42.46 91.92 35.39 233.34 -106.04 240.41 -98.97 98.99 42.46" />
            <rect x="-8.11" y="-106" width="116" height="114" />
            <polygon class="arced-base-color" points="-34.35 7.74 -41.42 0.66 100 -140.76 107.07 -133.69 -34.35 7.74" />
            <polygon class="arced-base-color"
                points="-17.88 24.48 -24.95 17.41 116.47 -124.01 123.54 -116.94 -17.88 24.48" />
            <polygon class="arced-base-color"
                points="-1.41 41.22 -8.48 34.15 132.94 -107.27 140.01 -100.2 -1.41 41.22" />
            <polygon class="arced-base-color" points="15.05 57.97 7.98 50.9 149.41 -90.52 156.48 -83.45 15.05 57.97" />
            <polygon class="arced-base-color"
                points="31.52 74.71 24.45 67.64 165.87 -73.78 172.94 -66.71 31.52 74.71" />
            <polygon class="arced-base-color"
                points="-33.95 8.97 -41.02 1.9 100.41 -139.52 107.48 -132.45 -33.95 8.97" />
            <polygon class="arced-base-color"
                points="-17.48 25.71 -24.55 18.64 116.87 -122.78 123.94 -115.71 -17.48 25.71" />
            <polygon class="arced-base-color"
                points="-1.01 42.46 -8.08 35.39 133.34 -106.04 140.41 -98.97 -1.01 42.46" />
            <polygon class="arced-base-color" points="15.46 59.2 8.39 52.13 149.81 -89.29 156.88 -82.22 15.46 59.2" />
            <polygon class="arced-base-color"
                points="31.93 75.94 24.86 68.87 166.28 -72.55 173.35 -65.48 31.93 75.94" />
            <rect x="-108.11" y="-106" width="116" height="114" />
            <polygon class="arced-base-color" points="-134.35 7.74 -141.42 0.66 0 -140.76 7.07 -133.69 -134.35 7.74" />
            <polygon class="arced-base-color"
                points="-117.88 24.48 -124.95 17.41 16.47 -124.01 23.54 -116.94 -117.88 24.48" />
            <polygon class="arced-base-color"
                points="-101.41 41.22 -108.48 34.15 32.94 -107.27 40.01 -100.2 -101.41 41.22" />
            <polygon class="arced-base-color"
                points="-84.95 57.97 -92.02 50.9 49.41 -90.52 56.48 -83.45 -84.95 57.97" />
            <polygon class="arced-base-color"
                points="-68.48 74.71 -75.55 67.64 65.87 -73.78 72.94 -66.71 -68.48 74.71" />
            <polygon class="arced-base-color"
                points="-133.95 8.97 -141.02 1.9 0.41 -139.52 7.48 -132.45 -133.95 8.97" />
            <polygon class="arced-base-color"
                points="-117.48 25.71 -124.55 18.64 16.87 -122.78 23.94 -115.71 -117.48 25.71" />
            <polygon class="arced-base-color"
                points="-101.01 42.46 -108.08 35.39 33.34 -106.04 40.41 -98.97 -101.01 42.46" />
            <polygon class="arced-base-color" points="-84.54 59.2 -91.61 52.13 49.81 -89.29 56.88 -82.22 -84.54 59.2" />
            <polygon class="arced-base-color"
                points="-68.07 75.94 -75.14 68.87 66.28 -72.55 73.35 -65.48 -68.07 75.94" />
        </pattern>
    </defs>

    <g id="g-Outline">
        <rect class="outline" x="50" y="50" width="400" height="400" />
    </g>
    <g id="g-Group">
        <g id="g-Group-LTF_State">
            <g id="g-Group-LTF_State-BottomRight">
                <title data-bind="text: hoverTexts().ltf"></title>
                <rect class="arced-style" x="50" y="50" width="450" height="450" />
            </g>
            <g id="g-Group-LTF_State-BottomLeft">
                <title data-bind="text: hoverTexts().ltf"></title>
                <rect class="arced-style" y="50" width="450" height="450" />
            </g>
            <g id="g-Group-LTF_State-TopRight">
                <title data-bind="text: hoverTexts().ltf"></title>
                <rect class="arced-style" x="50" width="450" height="450" />
            </g>
            <g id="g-Group-LTF_State-TopLeft">
                <title data-bind="text: hoverTexts().ltf"></title>
                <rect class="arced-style" width="450" height="450" />
            </g>
            <g id="g-Group-LTF_State-TopBottom">
                <title data-bind="text: hoverTexts().ltf"></title>
                <rect class="arced-style" x="50" width="400" height="500" />
            </g>
            <g id="g-Group-LTF_State-LeftRight">
                <title data-bind="text: hoverTexts().ltf"></title>
                <rect class="arced-style" y="50" width="500" height="400" />
            </g>
            <g id="g-Group-LTF_State-Right">
                <title data-bind="text: hoverTexts().ltf"></title>
                <rect class="arced-style" x="450" y="50" width="50" height="400" />
            </g>
            <g id="g-Group-LTF_State-Left">
                <title data-bind="text: hoverTexts().ltf"></title>
                <rect class="arced-style" y="50" width="50" height="400" />
            </g>
            <g id="g-Group-LTF_State-Bottom">
                <title data-bind="text: hoverTexts().ltf"></title>
                <rect class="arced-style" x="50" y="450" width="400" height="50" />
            </g>
            <g id="g-Group-LTF_State-Top">
                <title data-bind="text: hoverTexts().ltf"></title>
                <rect class="arced-style" x="50" width="400" height="50" />
            </g>
        </g>
        <g id="g-Group-State">
            <g id="g-Group-State-BottomRight">
                <title data-bind="text: hoverTexts().state"></title>
                <rect x="400" y="400" width="50" height="50" />
            </g>
            <g id="g-Group-State-BottomLeft">
                <title data-bind="text: hoverTexts().state"></title>
                <rect x="50" y="400" width="50" height="50" />
            </g>
            <g id="g-Group-State-TopRight">
                <title data-bind="text: hoverTexts().state"></title>
                <rect x="400" y="50" width="50" height="50" />
            </g>
            <g id="g-Group-State-TopLeft">
                <title data-bind="text: hoverTexts().state"></title>
                <rect x="50" y="50" width="50" height="50" />
            </g>
            <g id="g-Group-State-Right">
                <title data-bind="text: hoverTexts().state"></title>
                <rect x="400" y="50" width="50" height="400" />
            </g>
            <g id="g-Group-State-Left">
                <title data-bind="text: hoverTexts().state"></title>
                <rect x="50" y="50" width="50" height="400" />
            </g>
            <g id="g-Group-State-Bottom">
                <title data-bind="text: hoverTexts().state"></title>
                <rect x="50" y="400" width="400" height="50" />
            </g>
            <g id="g-Group-State-Top">
                <title data-bind="text: hoverTexts().state"></title>
                <rect x="50" y="50" width="400" height="50" />
            </g>
        </g>
    </g>
    <g id="g-Element">
        <g id="g-Element-Right">
            <title data-bind="text: hoverTexts().element"></title>
            <rect x="400" y="100" width="50" height="300" />
        </g>
        <g id="g-Element-Left">
            <title data-bind="text: hoverTexts().element"></title>
            <rect x="50" y="100" width="50" height="300" />
        </g>
        <g id="g-Element-Bottom">
            <title data-bind="text: hoverTexts().element"></title>
            <rect x="100" y="400" width="300" height="50" />
        </g>
        <g id="g-Element-Top">
            <title data-bind="text: hoverTexts().element"></title>
            <rect x="100" y="50" width="300" height="50" />
        </g>
    </g>
    <g id="g-Position">
        <g id="g-Position-Outside">
            <title data-bind="text: hoverTexts().position"></title>
            <rect x="100" y="100" width="300" height="300" />
        </g>
        <g id="g-Position-Inside">
            <title data-bind="text: hoverTexts().position"></title>
            <rect x="137.5" y="150" width="225" height="200" />
        </g>
        <text id="g-Position-Text" text-anchor="middle" data-bind="attr : { transform : positionTextTransform }">
            <tspan data-bind="text: label()">Position</tspan>
        </text>
    </g>
</svg>

Description

SVG

SVG Code

Conveyor