18

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

Improve this question
6
  • 1
    What do you mean by "contoured"? What is this supposed to look like?
    – Paulie_D
    Commented Jul 15, 2015 at 14:51
  • Related? - stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3
    – Paulie_D
    Commented Jul 15, 2015 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
    Commented Jul 15, 2015 at 15:01
  • Then see the question I linked.
    – Paulie_D
    Commented Jul 15, 2015 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
    Commented Jul 15, 2015 at 15:04

1 Answer 1

Reset to default
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.

Improve this answer
3
  • 1
    Is it possible to change the color of the shadow?
    – Richard
    Commented Oct 27, 2016 at 18:28
  • 1
    for those expecting a fiddle link with this changes applied: jsfiddle.net/sqiudward/Lozxrfkv
    – Kugan Kumar
    Commented May 21, 2020 at 16:16
  • SVG filters are necessary because browser support is wonky for drop-shadow on SVG objects: stackoverflow.com/a/34501056. Maybe this is from the spec? idk
    – derpedy-doo
    Commented Jul 27, 2022 at 16:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.