使用 SVG 可以通过多种技巧实现视觉上的“伪 3D”效果,虽然它本身是二维矢量图形格式,但结合 渐变、滤镜、变形(transform)、阴影、路径叠加等技术,可以模拟出立体感、透视感和深度感。对于需要3D效果又不想使用three.js等技术时,可以使用svg进行伪3D,节省资源,也更容易上手。
文章目录
常见的 SVG “伪 3D”实现方式
1. 渐变 + 阴影 模拟立体按钮
<svg width="200" height="80">
<defs>
<!-- 渐变背景 -->
<linearGradient id="btnGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4CAF50" />
<stop offset="100%" stop-color="#45a049" />
</linearGradient>
<!-- 阴影滤镜 -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000" flood-opacity="0.3"/>
</filter>
</defs></