如何修复CSS给SVG元素添加drop-shadow投影时被裁剪的问题

解决方案 #

drop-shadow阴影被裁剪的核心原因是阴影属于元素外的绘制效果，现有SVG视口/父容器的边界刚好卡到了路径边缘，超出的阴影部分被截断，可按以下方法修复：

• 调整SVG的viewBox属性，给四周预留足够的留白空间
  你的路径坐标横向范围为117.7_{394.28，纵向范围为0}367.43，可将原viewBox修改为viewBox="90 -30 330 430"，四周预留至少25px的空间适配25px模糊半径的阴影，避免边缘被截断。
• 给SVG或外层容器添加overflow: visible属性，同时预留内边距
  若SVG嵌入在HTML容器中，给外层容器添加overflow: visible，同时给SVG设置大于25px的padding，避免父容器截断阴影。
• 改用SVG原生feDropShadow滤镜，自定义绘制区域
  在SVG内部定义滤镜，主动扩大滤镜的绘制范围：

  <defs>
    <filter id="bulb-glow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="0" stdDeviation="25" flood-color="#ffb800"/>
    </filter>
  </defs>
  

  再给路径添加样式引用滤镜即可：

  .bulb-glass-active {
    fill: #d3a226 !important;
    filter: url(#bulb-glow);
  }
  

• 排查所有父元素的样式，确认没有overflow: hidden、自定义clip-path这类会裁剪内容的属性，如有则同步调整留出阴影空间。

内容的提问来源于stack exchange，提问作者Fatih Can Işık