在 SVG“路径”元素/三角形的两侧生成内阴影效果答案

【问题标题】：Generate Inner Shadow Effect On An SVG "Path" Element / Two Sides Of A Triangle在 SVG“路径”元素/三角形的两侧生成内阴影效果
【发布时间】：2017-03-21 09:40:28
【问题描述】：

我正在使用 SVG/Path 来生成一个向上的大三角形...有关一些背景信息，请参阅下面的相关链接。

Background Info

我要做的是在三角形的两侧（左上角和右上角）添加一个嵌入的模糊阴影（类似于框阴影），但不是三角形的底部。还尝试使阴影逐渐变细，使其不接触三角形的底部。以下链接是粗略但不准确的屏幕截图，我想做什么。

Shadow Example

这是我目前的代码：

svg#bigTriangleColor {
    pointer-events: none; background: red;
}
.container svg {
    display: block;
}
svg:not(:root) {
    overflow: hidden;
}
#bigTriangleColor path {
    fill: #EEEEEE;
    stroke: #EEEEEE;
    stroke-width: 2;
}

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>

在此先感谢，非常感谢您的帮助...

【问题讨论】：

标签： javascript html css svg path

【解决方案1】：

在三角形后面添加一个灰色形状来表示阴影。然后模糊它。

<svg width="100%" height="100" viewBox="0 0 600 100" preserveAspectRatio="none">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
  </defs>
  
  <polygon points="0,0, 600,0, 600,80, 300,20, 0,80" fill="#999" filter="url(#blur)"/>
  <polygon points="0,0, 600,0, 600,65, 300,20, 0,65" fill="black"/>
</svg>

【讨论】：

感谢您的贡献...我认为这是一个很好的开始。然而，有一件事仍然让我感到困惑。我正在寻找这个形状是 100% 的视点宽度和灵活/移动响应，就像这个例子一样。有没有办法用你的代码 sn-p 来完成它？非常感谢任何帮助。