如何向 SVG 路径元素添加投影？

Posted 2023-03-06

【中文标题】如何向 SVG 路径元素添加投影？

【英文标题】：How do I add a drop shadow to an SVG path element?

【发布时间】：2015-10-04 16:26:48

【问题描述】：

我一直在尝试对我的 SVG 路径应用投影。我搜索了filter 选项，当通过应用应用于路径时：-webkit-filter: drop-shadow( -5px -5px 10px #000 ); 似乎没有被应用。

Here's a fiddle with my SVG path demonstrating the problem

【问题讨论】：

“轮廓”是什么意思？这应该是什么样子？

相关？ - ***.com/questions/6088409/svg-drop-shadow-using-css3

我匆忙提出这个问题并写了box-shadow而不是filter: drop-shadow。那是我尝试过的实际属性，没有被应用@Paulie_D

然后看我链接的问题。

我确实通读了一遍。我应用了我在那里找到的东西。我确实找到了评论：This no longer appears to be supported as of at least Chrome 32.

【参考方案1】：

在您的 JSFiddle 中，我删除了您的 CSS 并添加了过滤器定义。它似乎工作：

<svg  >
<defs>
       <filter id="filter1" x="0" y="0">
           <feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5" />
           <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
           <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
</defs>
<path stroke-linejoin="round" stroke-linecap="round" stroke="red" stroke-opacity="1" stroke- fill="none" class="leaflet-clickable" d="M1063 458L1055 428L1034 433L1030 421L1017 423L911 452L895 455L885 441L859 424L809 410L788 394L774 377L744 309L730 313L727 304L669 319L599 341L596 331L491 364L488 357L498 343L490 343L450 352L417 256L371 270L366 253L355 256L351 242L217 282L194 210L191 196L166 113L45 147L44 140L13 150" filter="url(#filter1)"></path>
</svg>

也许对 dx、dy 和 stdDeviation 值进行一些调整会得到您想要的结果。

【讨论】：

可以改变阴影的颜色吗？

对于那些期望应用此更改的小提琴链接的人：jsfiddle.net/sqiudward/Lozxrfkv