добавить тень к полигону SVG

Question

В прилагаемом фрагменте у меня есть многоугольник, и мне нужно добавить эффект, чтобы он выглядел так:

Я не знаю, как это сделать в SVG, если бы это был HTML, то я думаю, что я бы использовал box-shadow.

Единственное, что кажется решением, - это использовать фильтр , но я думаю, что могу использовать это только на элементе <svg/>, поэтому я изо всех сил пытаюсь это сделать.

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

Вы можете использовать SVG feOffset, feGaussianBlur, feBlend вместо `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>

Это поможет вам создавать тени с точным цветом вашей фигуры SVG независимо от того, что это такое, поэтому вам не нужно устанавливать один цвет для ее тени. Для получения дополнительной информации об этой технике, вы можете посетить W3Schools .

Answer 2

Вы можете применить фильтр drop-shadow к SVG ИЛИ использовать SVG в качестве фона элемента и применить к нему фильтр:

polygon {
  fill: #5091b9;
  stroke: #4387b0;
  stroke-width: 2;
}
svg {
  filter: drop-shadow(0 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="#4387b0" stroke-width="2" fill="#5091b9" 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>');
  filter: drop-shadow(0 0 5px red);
}

<svg viewBox="0 0 100 100" width=100><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>

<div class="box"></div>

Вы также можете рассмотреть фильтр SVG:

.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>