How do I add a drop shadow to an SVG path element?

Question

I've been attempting to apply a drop shadow to my SVG Path. I googled across the filter option which when applied to path by applying: -webkit-filter: drop-shadow( -5px -5px 10px #000 ); which didn't seem to get applied.

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

What do you mean by "contoured"? What is this supposed to look like? — Paulie_D, Jul 15 '15 at 14:51
Related? - http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 — Paulie_D, Jul 15 '15 at 14:53
I rushed that question and wrote `box-shadow` instead of `filter: drop-shadow`. That's the actual property I tried out and was not being applied @Paulie_D — Louis93, Jul 15 '15 at 15:01
I did give it a read through. I applied what I found there. I did find comment though: `This no longer appears to be supported as of at least Chrome 32.` — Louis93, Jul 15 '15 at 15:04

cobaltduck · Accepted Answer · 2015-07-15T15:23:21.307

22

Within your JSFiddle, I deleted your CSS and added a filter definition. It seems to work:

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

Maybe a few tweaks to the dx, dy, and stdDeviation values will get it just the way you want.

edited Jul 15 '15 at 15:23

answered Jul 15 '15 at 15:14

cobaltduck

1,598
5
25
51

1

Is it possible to change the color of the shadow? – Richard Oct 27 '16 at 18:28
1

for those expecting a fiddle link with this changes applied: http://jsfiddle.net/sqiudward/Lozxrfkv/ – Kugan Kumar May 21 '20 at 16:16
SVG filters are necessary because browser support is wonky for `drop-shadow` on SVG objects: https://stackoverflow.com/a/34501056. Maybe this is from the spec? idk – derpedy-doo Jul 27 '22 at 16:00

How do I add a drop shadow to an SVG path element?

1 Answers1