[FIXED] How to remove the shadow from the text of the svg and make it visible over it?

Issue

This is my code in my React app and I find it difficult to make the text appear on the svg, and also want to remove the shadow from the text so that only the shape is having the shadow.

<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>
            <text
              className='fill-modern-green text-sm'
              x='50%'
              y='100%'
              dominant-baseline='middle'
              text-anchor='middle'
            >
              All rights reserved.
            </text>
            <use xlinkHref='#footer-shadow'></use>
          </g>
          <filter id='shadow'>
            <feDropShadow
              dx='0'
              dy='0'
              stdDeviation='0.8'
              flood-color='black'
            />
          </filter>
        </svg>
      </div>

Solution

Your stacking order isn't ideal.
The <use> element overlays you text – so swap the order and apply the drop shadow filter to your ` element.

svg{
  width:50em;
  overflow:visible;
  border:1px solid red;
}

<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'>
    <defs>
      <filter id='shadow'>
        <feDropShadow dx='0' dy='0' stdDeviation='2' flood-color='black' />
      </filter>
      <!-- path is only visible if referenced by <use> element -->
      <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>
    </defs>
    <g >
      <use href='#footer-shadow' filter='url(#shadow)'></use>
      <!-- The text is now in the foreground -->
      <text fill="#fff" className='fill-modern-green text-sm' x='50%' y='100%' dominant-baseline='middle' text-anchor='middle'>
        All rights reserved.
      </text>
    </g>
  </svg>
</div>

I also recommend to put your filters inside a <defs> element at the beginning of your svg. Some app frameworks (e.g flutter) struggle with defs placed after the elements these defs (e.g. filters, gradients etc.) are applied to.
So it's just a best practice for better compatibility.

Answered By - herrstrietzel
Answer Checked By - - Robin (ReactFix Admin)