如何去除SVG文本阴影并使文本显示在图形上方（React场景）

直接调整SVG元素结构，分离文本与带阴影的图形部分即可解决问题：

<div className='overflow-hidden'>
  <svg
    className='fill-green block m-auto'
    viewBox='0 0 500 150'
    preserveAspectRatio='none'
    xmlns='http://www.w3.org/2000/svg'
  >
    {/* 仅给图形应用阴影滤镜 */}
    <g filter='url(#shadow)'>
      <path
        id='footer-shadow'
        className='stroke-none'
        d='M29.86,179.11 C100.86,200.36 200.94,60.48 450.84,180.09 L363.96,855.44 L0.00,190.00 Z'
      ></path>
      <use xlinkHref='#footer-shadow'></use>
    </g>
    {/* 文本单独放在图形之后，确保层级在上方且无阴影 */}
    <text
      className='fill-modern-green text-sm'
      x='50%'
      y='100%'
      dominant-baseline='middle'
      text-anchor='middle'
    >
      All rights reserved.
    </text>
    <filter id='shadow'>
      <feDropShadow
        dx='0'
        dy='0'
        stdDeviation='0.8'
        flood-color='black'
      />
    </filter>
  </svg>
</div>

关键调整说明： #

• 将<text>元素从带阴影滤镜的<g>标签中移出，避免文本继承阴影效果
• 把文本放在图形元素之后，SVG遵循「后渲染元素视觉层级更高」的规则，确保文本显示在图形上方
• 阴影滤镜仅作用于包含路径的<g>容器，保证只有图形拥有阴影效果

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