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 element so I am struggling how I can do this.

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

user_8620333 · Answer

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 element

SVG as background

You can also consider the SVG filter:

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

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

user_7707724 · Answer

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

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.

add drop-shadow to svg polygon

2 Answers