svg实现常见伪3D效果

使用 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></