如何为SVG路径元素添加阴影？

路易93

我一直在尝试向我的SVG路径应用阴影。我在filter选项上用谷歌搜索，当应用到路径时，它应用了：-webkit-filter: drop-shadow( -5px -5px 10px #000 );似乎没有被应用。

cobaltduck

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

<svg width="100%" height="300px">
<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-width="5" 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值进行一些调整将以您想要的方式获得它。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。