当前位置：首页 > news >正文

svg实现常见伪3D效果

news 来源：原创 2025/6/3 22:50:54

使用 SVG 可以通过多种技巧实现视觉上的“伪 3D”效果，虽然它本身是二维矢量图形格式，但结合 渐变、滤镜、变形（transform）、阴影、路径叠加等技术，可以模拟出立体感、透视感和深度感。对于需要3D效果又不想使用three.js等技术时，可以使用svg进行伪3D，节省资源，也更容易上手。

文章目录

- 常见的 SVG “伪 3D”实现方式
- - 1. **渐变 + 阴影模拟立体按钮**
  - 2. **变形（Transform）模拟倾斜/透视**
  - 3. **滤镜模拟光照与凹凸感**
  - 4. **路径叠加 + 渐变实现立体图标**
  - 5. **多层叠加 + 投影实现卡片式立体感**

常见的 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><!-- 使用渐变填充矩形 --><rect x="20" y="10" rx="12" ry="12" width="160" height="60"fill="url(#btnGrad)" filter="url(#shadow)" /><!-- 添加文字 --><text x="100" y="50" text-anchor="middle" font-size="20" fill="#fff" font-family="Arial">Click Me</text>
</svg>

2. 变形（Transform）模拟倾斜/透视

使用 skewX, skewY, rotate 等属性制造倾斜角度，模拟 3D 视觉。

<svg width="200" height="150"><rect x="50" y="30" width="100" height="60"fill="#e74c3c"transform="skewX(-20) rotate(10 100 60)" />
</svg>

3. 滤镜模拟光照与凹凸感

使用 <filter> 创建高光或阴影来增强立体感：

<svg width="200" height="100"><defs><filter id="bevel"><feDiffuseLighting in="SourceAlpha" lighting-color="#fff" surfaceScale="5"><feDistantLight azimuth="45" elevation="60"/></feDiffuseLighting><feComponentTransfer><feFuncA type="linear" slope="1.5" intercept="0"/></feComponentTransfer></filter></defs><rect x="20" y="20" width="160" height="60" fill="#3498db" filter="url(#bevel)" />
</svg>

4. 路径叠加 + 渐变实现立体图标

通过多个路径组合并应用渐变色，可模拟按钮或图标的浮起感。

<svg width="100" height="100"><defs><radialGradient id="iconGrad" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/><stop offset="100%" stop-color="#3498db" stop-opacity="1"/></radialGradient></defs><!-- 主体圆形 --><circle cx="50" cy="50" r="40" fill="url(#iconGrad)" stroke="#2980b9" stroke-width="2"/><!-- 内部高光路径 --><path d="M30,50 Q50,20 70,50 Q50,80 30,50 Z" fill="#fff" opacity="0.3"/>
</svg>

5. 多层叠加 + 投影实现卡片式立体感

<svg width="250" height="150"><defs><filter id="cardShadow"><feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000" flood-opacity="0.2"/></filter></defs><!-- 卡片主体 --><rect x="20" y="20" rx="15" ry="15" width="200" height="100"fill="#ecf0f1" stroke="#bdc3c7" stroke-width="1" filter="url(#cardShadow)" /><!-- 上方高光条 --><rect x="20" y="20" rx="15" ry="15" width="200" height="20"fill="linear-gradient(to bottom, #ffffff, transparent)" opacity="0.5" />
</svg>