在SVG路径上生成内阴影效果元素/三角形的两条边

Generate Inner Shadow Effect On An SVG "Path" Element / Two Sides Of A Triangle

本文关键字：三角形 两条 元素 路径 SVG 阴影      更新时间：2023-09-26

我使用SVG/Path生成一个大的向上指向三角形…有关背景资料，请参阅下面的相关链接。

的背景信息

我想做的是在三角形的两边(左上和右上)添加一个插入的模糊阴影(类似于盒影)，但不是三角形的底部。也试图逐渐减少阴影，这样它就不会碰到三角形的底部。下面的链接是一个粗略的截图，但不是确切的，我想做什么。

阴影例子

这是我到目前为止的代码:

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>

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

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

相关文章：