How to generate 3d view in the svg?

Question

I am new to svg

Actually we are doing for property interaction. With the help of the svg.

I have slots like this

SVG Path

    <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="281.333px" height="117.333px" viewBox="0 0 281.333 117.333" enable-background="new 0 0 281.333 117.333"
     xml:space="preserve">
<path id="slot_1" fill="#0D8900" d="M189.667,20l-1,37.667h80.667l0.333-37.333L189.667,20z M264.667,53.5L193.5,53.667l0.542-30.208
    l70.625,0.708V53.5z"/>
<path  id="slot_2" fill="#0D8900" d="M24,20.25l-6.002,37.667h82.668L105,20.583L24,20.25z M94.998,53.416l-70.166,0.167l4.001-29.332
    l69.166,0.166L94.998,53.416z"/>
<path id="slot_3" fill="#0D8900" d="M107.997,20.25l-4.001,37.667h81.667l1.332-37.333L107.997,20.25z M179.996,53.416l-69.166,0.167
    l3.001-29.332l67.164,0.166L179.996,53.416z"/>
<path id="slot_4" fill="#0D8900" d="M188.176,61.251l-1,40.669h82.668l0.333-40.337L188.176,61.251z M265.177,96.418l-73.167,0.167l0.542-30.875
    l72.871-0.121L265.177,96.418z"/>
<path  id="slot_5" fill="#0D8900" d="M16.996,60.25l-6.002,40.669h85.669l3.334-40.337L16.996,60.25z M90.996,96.418l-73.167,0.167l5.002-32.335
    l70.166,0.166L90.996,96.418z"/>
<path id="slot_1" fill="#0D8900" d="M103.255,60.75l-3.001,40.669h83.668l1.332-40.337L103.255,60.75z M178.256,95.917l-71.167,0.167l2-31.334
    l70.165,0.166L178.256,95.917z"/>
<text transform="matrix(1 0 0 1 53.1675 41.9995)" font-family="'MyriadPro-Regular'" font-size="12">A1</text>
<text transform="matrix(1 0 0 1 143.501 41.9995)" font-family="'MyriadPro-Regular'" font-size="12">A2</text>
<text transform="matrix(1 0 0 1 222.8345 41.9995)" font-family="'MyriadPro-Regular'" font-size="12">A3</text>
<text transform="matrix(1 0 0 1 53.1675 81.9995)" font-family="'MyriadPro-Regular'" font-size="12">A4</text>
<text transform="matrix(1 0 0 1 143.501 81.9995)" font-family="'MyriadPro-Regular'" font-size="12">A5</text>
<g>
    <path d="M225.052,79.457L224.213,82h-1.08l2.747-8.084h1.259L229.897,82h-1.115l-0.864-2.543H225.052z M227.703,78.641
        l-0.792-2.326c-0.18-0.528-0.3-1.008-0.419-1.476h-0.024c-0.12,0.479-0.251,0.972-0.408,1.463l-0.792,2.339H227.703z"/>
    <path d="M235.167,74.948c-0.216-0.013-0.492,0-0.792,0.048c-1.655,0.275-2.531,1.487-2.71,2.771h0.036
        c0.372-0.492,1.02-0.899,1.883-0.899c1.379,0,2.351,0.995,2.351,2.519c0,1.427-0.972,2.746-2.591,2.746
        c-1.667,0-2.758-1.295-2.758-3.322c0-1.535,0.552-2.746,1.319-3.514c0.647-0.636,1.511-1.031,2.495-1.151
        c0.312-0.048,0.576-0.061,0.768-0.061V74.948z M234.867,79.445c0-1.115-0.636-1.787-1.607-1.787c-0.636,0-1.224,0.396-1.511,0.96
        c-0.072,0.119-0.12,0.275-0.12,0.468c0.024,1.283,0.612,2.23,1.715,2.23C234.255,81.316,234.867,80.56,234.867,79.445z"/>
</g>
</svg>

When user mouse hover any of the slot (**example like this 3d view with the transition **) need to be generated. Each slot will have unique id of the path.

This SVG path one need to generate dynamically based on the mouse hover

Here i have attached the sample svg slots For your reference.

SVG Mouse hover

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="49.667px" height="60.536px" viewBox="0 0 49.667 60.536" enable-background="new 0 0 49.667 60.536" xml:space="preserve">
<g enable-background="new    ">
    <g>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="13.4409" y1="17.2715" x2="37.1904" y2="17.2715">
            <stop  offset="0" style="stop-color:#FFFFFF"/>
            <stop  offset="1" style="stop-color:#3D3D3D"/>
        </linearGradient>
        <polygon fill="url(#SVGID_1_)" points="36.223,10.347 37.19,24.193 14.333,24.335 13.441,10.208       "/>
    </g>
    <g>
        <polygon fill="#B5B6B6" points="13.955,10.157 15.333,24.333 12.667,50 11.802,27.738         "/>
    </g>
    <g>
        <path fill="#226A36" d="M7.566,30.208l3.157-20.865l29.541-0.261l-5.008,21.522L7.566,30.208z M35.783,11.955l-21.467,0.127
            l-2.514,15.656l20.296-0.267l2.449-9.984"/>
    </g>
    <g>
        <polygon fill="#B5B6B6" points="40.348,9.097 41.223,21.717 37.514,52.217 35.256,30.603      "/>
    </g>
    <g>
        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="22.6021" y1="29.1782" x2="22.602" y2="53.7121">
            <stop  offset="0" style="stop-color:#FFFFFF"/>
            <stop  offset="1" style="stop-color:#3D3D3D"/>
        </linearGradient>
        <polygon fill="url(#SVGID_2_)" points="35.256,30.603 37.514,51.883 8.726,51.495 7.691,30.333        "/>
    </g>
</g>
</svg>

Note: SVG should be in the tiles overview

Kindly guide me how can i achive this. if you have any other easy way to achieve this, Suggestion are welcome ...