{{--<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blue-cube"
     viewBox="68 30 180 220" --}}{{--style="transform: rotate3d(0,0,60,40deg)"--}}{{-->
    <defs>
        <g id="cube" style="fill-opacity: .9;stroke-miterlimit: 0;">
            <rect width="21" height="24" fill="#fff" stroke="#0079ad"
                  transform="skewY(30)" />
            <rect width="21" height="24" fill="#fff" stroke="#0079ad"
                  transform="skewY(-30) translate(21 24.3)" />
            <rect width="21" height="21" fill="#fff" stroke="#0079ad"
                  transform="scale(1.41,.81) rotate(45) translate(0 -21)" />
        </g>
    </defs>
    <defs>
        <g id="exceptionCube" style="fill-opacity: .9;stroke-miterlimit: 0;">
            <rect width="21" height="24" :fill="color" stroke="#0079ad"
                  transform="skewY(30)" />
            <rect width="21" height="24" :fill="color" stroke="#0079ad"
                  transform="skewY(-30) translate(21 24.3)" />
            <rect width="21" height="21" :fill="color" stroke="#0079ad"
                  transform="scale(1.41,.81) rotate(45) translate(0 -21)" />
        </g>
    </defs>
    <use v-for="box in boxes" :xlink:href="box.sign ? '#exceptionCube' : '#cube'" :x="box.x" :y="box.y" />
</svg>--}}


<svg width="579.9997059770881" height="399.999797225578" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title>background</title>
        <rect height="402" width="582" y="-1" x="-1" fill="#fff" id="canvas_background"/>
        <g y="0" x="0" height="100%" width="100%" display="none" overflow="visible" id="canvasGrid">
            <rect height="100%" width="100%" y="0" x="0" stroke-width="0" fill="url(#gridpattern)"/>
        </g>
    </g>
    <g>
        <title>Layer 1</title>
        <line y2="228.67" x2="335.5" y1="229.67" x1="176.5" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" stroke="#0000ff" fill="none" id="svg_1"/>
        <line y2="267.67" x2="177.5" y1="229.67" x1="177.5" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" stroke="#0000ff" fill="none" id="svg_4"/>
        <line y2="266.67" x2="334.5" y1="229.67" x1="334.5" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" stroke="#0000ff" fill="none" id="svg_8"/>
        <line y2="146.17" x2="190.5" y1="230.17" x1="176.5" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" stroke="#0000ff" fill="none" id="svg_10"/>
        <line y2="228.67" x2="334.5" y1="141.67" x1="316.5" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" fill="none" id="svg_13"/>
        <line y2="264.67" x2="334.5" y1="265.67" x1="177.5" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" stroke="#0000ff" fill="none" id="svg_14"/>
        <line y2="145.835" x2="317.751" y1="146.835" x1="191.252" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" stroke="#0000ff" fill="none" id="svg_15"/>
        <line y2="229.334" x2="334.25" y1="144.835" x1="317.751" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" stroke="#0000ff" fill="none" id="svg_16"/>
        <line y2="181.835" x2="324.75" y1="182.335" x1="185.252" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" stroke="#0000ff" fill="none" id="svg_17"/>
        <line y2="228.834" x2="224.751" y1="147.335" x1="231.751" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" stroke="#0000ff" fill="none" id="svg_18"/>
        <line y2="228.834" x2="280.751" y1="145.835" x1="279.251" stroke-width="1.5" stroke-linejoin="undefined" stroke-linecap="undefined" stroke="#0000ff" fill="none" id="svg_19"/>
    </g>
</svg>