add drop-shadow to svg polygon

Question

In the attached snippet, I have a polygon and I need to add an effect to make it look like this:

I don't know how to do this in svg, if it was html then I think I would use box-shadow.

THe only thing that appears to be a solution is to use filter but I think I can only use that on an <svg/> element so I am struggling how I can do this.

polygon {
  fill: #5091b9;
  stroke: #4387b0;
  stroke-width: 2;
}

<svg width="300" height="300">
  <g transform="translate(100, 100)">
    <polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node-vertical__hexagon node-vertical__inactive">         </polygon>
  </g>
</svg>

Answer 1

You can apply the drop-shadow filter to the SVG OR use the SVG as a background of an element and apply filter to it:

polygon {
  fill: #5091b9;
  stroke: #4387b0;
  stroke-width: 2;
}
.filter {
  filter: drop-shadow(10px 0 5px red);
}

.box {
  height: 100px;
  width: 100px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100"><g transform="translate(50, 50)"><polygon stroke="%234387b0" stroke-width="2" fill="%235091b9" points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" ></polygon></g></svg>');
}

<p>SVG element</p>
<svg viewBox="0 0 100 100" width="100" class="filter"><g transform="translate(50, 50)" ><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" ></polygon></g></svg>
<p>SVG as background</p>
<div class="box filter"></div>

You can also consider the SVG filter:

.node-vertical__inactive {
  filter:url(#shadow);
}

.node-vertical__hexagon {
  fill: #5091b9;
  stroke: #4387b0;
  stroke-width: 2;
}

<svg>
<defs>
    <filter id="shadow" x="-20%" y="-20%" width="200%" height="200%">
      <feDropShadow dx="20" dy="3" stdDeviation="5" flood-color="#5091b9" />
    </filter>
  </defs>
<g class="vx-group" transform="translate(0, 0)">
  <g class="vx-group node-vertical__container" transform="translate(100, 100)"><svg class="node-vertical__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node-vertical__hexagon"></polygon></svg>
</g>
</g>
</svg>

Answer 2

You can use SVG feOffset, feGaussianBlur, feBlend instead of `feDropShadow.

<svg width="300" height="300">
    <defs>
    <filter id="poly" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="15" dy="15" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <g transform="translate(100, 100)">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" filter="url(#poly)" />
  </g>
</svg>

This will help you to make shadows with the exact color of your SVG shape no matter what it is so you don't have to set a single color for its shadow. For more information about this technique, you can visit W3Schools.