svg 透视

最新推荐文章于 2025-06-01 08:31:09 发布

shqizh

最新推荐文章于 2025-06-01 08:31:09 发布

阅读量553

点赞数

CC 4.0 BY-SA版权

分类专栏： svg 文章标签：透视SVG

本文链接：https://blog.youkuaiyun.com/shqizh/article/details/65938326

svg 专栏收录该内容

1 篇文章

订阅专栏

该博客通过SVG代码展示了如何创建一个具有透视效果的3D盒子。文章使用SVG元素和JavaScript来动态调整透视，包括矩形、多边形和线条的绘制，以及通过点击按钮实现沿着X轴移动的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?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 460 595 415 505 415" style="fill: orange; stroke: #888; opacity: .6;" />
<polygon points="450 460 450 560 505 505 505 415" style="fill: green; stroke: #888; opacity: .6;" />
<polygon points="550 460 550 560 595 505 595 415" style="fill: blue; stroke: #888; opacity: .6;" />
<polygon points="450 560 550 560 595 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>