SVG fedropshadow getting clipped

Question

I am trying to create a drop shadow around an SVG shape and the shadow seems to cut-off

The shadow (shadow2) seems to have the cut-off issue when I use stdDeviationvalue 2 or more.

How do I create a drop-shadow that doesn't get clipped? This is the live working link:

.icon{
  width: 200px;
  height: 200px;
}

<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
  <path id="heart-icon" d="M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454
    C30,20.335,16,28.261,16,28.261z"/>  
  <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
    </filter>
    <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation="2"
          flood-color="cyan"/>
    </filter>
    <filter id="shadow3">
      <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0"
          flood-color="pink" flood-opacity="0.5"/>
    </filter>
  </svg>

    <div>
      <svg class="icon" style="fill:pink;"  viewBox="0 0 32 32">
          <g filter="url(#shadow)">
            <use xlink:href="#heart-icon"></use>
          </g>
      </svg>
        <svg class="icon" style="fill:#FE4365;"  viewBox="0 0 32 32">
          <g filter="url(#shadow2)">
            <use xlink:href="#heart-icon"></use>
          </g>
      </svg>
        <svg class="icon" style="fill:pink;"  viewBox="0 0 32 32">
          <g filter="url(#shadow3)">
            <use xlink:href="#heart-icon"></use>
          </g>
      </svg>
    </div>

score 0 · Answer 1 · answered Aug 04 '22 at 07:13

Just make the filter bigger by increasing its width, or height too if you need to.

The defaults for x and y for filters are -10% and width 120%. If your filter is bigger than those defaults you'll need to specify what size you do want.

.icon{
  width: 200px;
  height: 200px;
}

<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
  <path id="heart-icon" d="M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454
    C30,20.335,16,28.261,16,28.261z"/>  
  <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
    </filter>
    <filter id="shadow2" x="-20%" width="140%">
      <feDropShadow dx="0" dy="0" stdDeviation="2"
          flood-color="cyan"/>
    </filter>
    <filter id="shadow3">
      <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0"
          flood-color="pink" flood-opacity="0.5"/>
    </filter>
  </svg>

    <div>
      <svg class="icon" style="fill:pink;"  viewBox="0 0 32 32">
          <g filter="url(#shadow)">
            <use xlink:href="#heart-icon"></use>
          </g>
      </svg>
        <svg class="icon" style="fill:#FE4365;"  viewBox="0 0 32 32">
          <g filter="url(#shadow2)">
            <use xlink:href="#heart-icon"></use>
          </g>
      </svg>
        <svg class="icon" style="fill:pink;"  viewBox="0 0 32 32">
          <g filter="url(#shadow3)">
            <use xlink:href="#heart-icon"></use>
          </g>
      </svg>
    </div>

If I increase the stdDeviation it gets clipped out again. How do I set the filter width to infinite so that It never gets clipped off? It's okay even if the shadow falls on the nearby shapes. — Akhil Biju, Aug 04 '22 at 11:25
infinite is a lot of pixels, that will take forever to compute. Just make the width whatever you need. — Robert Longson, Aug 04 '22 at 11:29

SVG fedropshadow getting clipped

1 Answers1