将阴影添加到svg多边形

Question

在所附的代码段中，我有一个多边形，我需要添加一个效果使其看起来像这样：

我不知道如何在svg中执行此操作，如果它是html，那么我想我会使用box-shadow。

似乎唯一可以解决的问题是使用filter，但我认为我只能在<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

您可以将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>

Answer 2

您可以使用Foo代替`feDropShadow。

Bar

这将帮助您以SVG feOffset, feGaussianBlur, feBlend形状的确切颜色制作阴影，无论它是什么形状，因此您不必为阴影设置单一颜色。 有关此技术的更多信息，您可以访问W3Schools。