svg 透视

<?xml version='1.0' encoding='UTF-8' standalone='no'?> 
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'> 
<svg style="width: 1000px; height: 600px; border: 1px solid red;"
xmlns='http://www.w3.org/2000/svg' 
xmlns:xlink='http://www.w3.org/1999/xlink'
onload='init(evt)'> 
 
  <style> 
    .edge{
        fill: white;
        stroke: black;
        stroke-width: 1;
    }
    .button{
        fill: #2060dd;
        stroke: #2580ff;
        stroke-width: 1;
    }
    .button:hover{
        stroke-width: 3;
    }
  </style> 
 
  <script type='text/ecmascript'> 
    <![CDATA[


    edges = [[0,1],[2,3],[0,2],[1,3],[4,5],[6,7],[4,6],[5,7],[0,4],[1,5],[2,6],[3,7]]
    x_coords = [450,550,450,550,505,595,505,595];
    y_coords = [460,460,560,560,415,415,505,505];
    z_coords = [0,0,0,0,100,100,100,100];


    centre_x = 1000;
    centre_y = 500;
    centre_z = 50;
    
function init(evt)
{
   if ( window.svgDocument == null )
   {
svgDocument = evt.target.ownerDocument;
   }
drawBox();
}
    
function drawBox()
{
   for(var i=0; i<edges.length; i++)
   {
edge = svgDocument.getElementById('edge-'+i);
edge.setAttributeNS(null, 'x1', x_coords[edges[i][0]]);
edge.setAttributeNS(null, 'x2', x_coords[edges[i][1]]);
edge.setAttributeNS(null, 'y1', y_coords[edges[i][0]]);
edge.setAttributeNS(null, 'y2', y_coords[edges[i][1]]);
   }
}


function moveAboutX(radians)
{
   for(var i=0; i<x_coords.length; i++)
            {
x_coords[i] = x_coords[i] + 10*radians;
            }
   for(var i=4; i<x_coords.length; i++)
            {
x_coords[i] = x_coords[i] - radians;
            }
drawBox();


}


function beginMoveX(radians)
{
moveAboutX(radians);
moveX_timeout = setInterval("moveAboutX(" + radians + ")", 20);
}
    
function endMoveX()
{
   if (typeof(moveX_timeout) != "undefined")
            {
clearTimeout(moveX_timeout);
   }
}
    ]]>
  </script> 
<rect x="505" y="415" width="90" height="90" style="fill: yellow; stroke: #888; opacity: .6;" />
<polygon points="450 460 550 460595 415 505 415" style="fill: orange; stroke: #888; opacity: .6;" />
<polygon points="450 460 450 560505 505 505 415" style="fill: green; stroke: #888; opacity: .6;" />
<polygon points="550 460 550 560595 505 595 415" style="fill: blue; stroke: #888; opacity: .6;" />
<polygon points="450 560 550 560595 505 505 505" style="fill: black; stroke: #888; opacity: .6;" /> -->
<rect x="450" y="460" width="100" height="100" style="fill: red; stroke: #888; opacity: .6;" />
<line x1="0" y1="10" x2="1000" y2="10" style="fill: red; stroke: #ccf;" />
<circle cx="1000" cy="10" r="2" style="fill: red;" />
<line x1="1000" y1="10" x2="450" y2="560" style="fill: red; stroke: #ccf;" />
<line x1="1000" y1="10" x2="450" y2="460" style="fill: red; stroke: #ccf;" />
<line x1='1000' y1='10' x2='550' y2='560' style="fill: red; stroke: #ccf;" />


    <line id='edge-0' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-1' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-2' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-3' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-4' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-5' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-6' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-7' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-8' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-9' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-10' class='edge' x1='200' y1='200' x2='200' y2='200'/>
    <line id='edge-11' class='edge' x1='200' y1='200' x2='200' y2='200'/>


    <path class="button"
          d="m 30 465 15 -15 0 8 45 0 0 14 -45 0 0 8 z"
          onmousedown='beginMoveX(-0.1)'
          onmouseout='endMoveX()'
          onmouseup='endMoveX()'/>
          
    <path class="button"
          d="m 970 465 -15 -15 0 8 -45 0 0 14 45 0 0 8 z"
          onmousedown='beginMoveX(0.1)'
          onmouseout='endMoveX()'
          onmouseup='endMoveX()'/>
</svg>