如何在SVG中实现与参考PNG效果一致的内阴影

可通过调整滤镜参数直接实现和参考图一致的强内阴影效果，无需额外依赖，以下是完整可运行的代码示例：

<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 强内阴影滤镜，可直接复用 -->
    <filter id="heavyInnerShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feOffset in="SourceAlpha" dx="4" dy="4" result="offsetShadow" />
      <!-- 调低模糊半径可以提升阴影硬度，增强视觉强度 -->
      <feGaussianBlur in="offsetShadow" stdDeviation="1.5" result="blurShadow" />
      <feComposite operator="out" in="blurShadow" in2="SourceAlpha" result="innerShadowMask" />
      <!-- 调高flood-opacity可以直接提升阴影浓度 -->
      <feFlood flood-color="#000000" flood-opacity="0.85" result="shadowColor" />
      <feComposite operator="in" in="shadowColor" in2="innerShadowMask" result="finalShadow" />
      <feComposite operator="over" in="finalShadow" in2="SourceGraphic" />
    </filter>
  </defs>

  <!-- 目标元素应用滤镜即可 -->
  <rect x="60" y="60" width="280" height="180" rx="10" fill="#ffffff" filter="url(#heavyInnerShadow)" />
</svg>

• 要匹配参考图的强阴影效果，可直接把flood-opacity参数调整到0.8-0.95区间，同时将stdDeviation降到1-2之间，就能得到高对比度的硬边内阴影
• 如果需要多方向内阴影，可叠加多组feOffset节点，分别设置不同的dx、dy参数控制上下左右的阴影位置和强度
• 参考效果预览：
  

内容的提问来源于stack exchange，提问作者Lokesh Sharma