如何为复杂SVG路径实现Illustrator风格的真实内阴影效果？

SVG没有原生的内阴影滤镜，但可以通过组合多个基础滤镜模拟出真实内阴影（区别于内发光），且支持自定义阴影方向、尺寸、模糊量和透明度，以下是具体实现方案：

核心实现逻辑 #

通过feComposite滤镜的遮罩裁剪能力，将模糊偏移后的阴影限制在路径内部区域，最终和原路径叠加，实现内阴影效果。

可配置项的控制方法 #

• 阴影/光照方向：通过feOffset的dx（水平偏移）和dy（垂直偏移）控制，正值对应右下方向阴影（光照左上），负值对应左上方向阴影（光照右下）。
• 阴影尺寸：可通过feMorphology的radius参数扩展阴影范围（operator="dilate"为扩大），或调整feOffset的偏移量间接控制阴影覆盖大小。
• 模糊量：修改feGaussianBlur的stdDeviation值，数值越大模糊程度越高。
• 透明度：调整feFlood的flood-opacity参数，范围0（完全透明）到1（完全不透明）。

完整示例代码 #

<svg width="400" height="400" viewBox="0 0 400 400">
  <!-- 可配置的内阴影滤镜 -->
  <filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
    <!-- 配置阴影颜色与透明度 -->
    <feFlood flood-color="#000" flood-opacity="0.6" result="shadowColor"/>
    <!-- 用原路径裁剪阴影颜色，只保留路径区域内的颜色 -->
    <feComposite in="shadowColor" in2="SourceGraphic" operator="in" result="maskedShadow"/>
    <!-- 配置模糊量 -->
    <feGaussianBlur in="maskedShadow" stdDeviation="5" result="blurredShadow"/>
    <!-- 配置阴影方向与偏移尺寸 -->
    <feOffset in="blurredShadow" dx="3" dy="3" result="offsetShadow"/>
    <!-- 用原路径反向裁剪偏移后的阴影，只保留路径内部的阴影部分 -->
    <feComposite in="offsetShadow" in2="SourceGraphic" operator="out" result="innerShadow"/>
    <!-- 将内阴影与原路径叠加 -->
    <feComposite in="SourceGraphic" in2="innerShadow" operator="over"/>
  </filter>

  <!-- 应用内阴影的复杂路径示例 -->
  <path d="M100,100 C150,50 250,50 300,100 C350,150 350,250 300,300 C250,350 150,350 100,300 C50,250 50,150 100,100 Z" 
        fill="#f0f0f0" stroke="#ccc" stroke-width="2"
        filter="url(#innerShadow)"/>
</svg>

进阶调整说明 #

如果需要更大的阴影尺寸，可在feGaussianBlur前添加feMorphology滤镜扩展阴影范围：

<feMorphology in="maskedShadow" operator="dilate" radius="2" result="expandedShadow"/>

然后将feGaussianBlur的in参数改为expandedShadow即可。

内容的提问来源于stack exchange，提问作者G.K.