How to Apply Drop-Shadow Filter via CSS to Svg Specific Element/Path

How to apply drop-shadow filter via CSS to SVG specific element/path

You can apply a shadow selectively by doing color selection on the object you want to shadow, creating a shadow and then merging it under the original graphic. But you have to do it via the SVG filter trapdoor in CSS Filters - which doesn't work in IE. (So ... hacky, but possible)

Spec is here: w3.org/TR/SVG11/filters.html#feColorMatrixElement

Demo toy is here:

https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices

That matrix doubles the opacity of all red values, zeros out the opacity of everything else and then subtracts 1. The effect is to only leave things at 100% opacity that are rgb(255,0,0)

#mySVG {   filter: url(#selective-shadow);}
.shadow {  fill: red;}

<svg> <defs>   <filter id="selective-shadow">     <feColorMatrix type="matrix" values="0 0 0 0 0                                           0 0 0 0 0                                          0 0 0 0 0                                           2 0 0 0 -1"/>     <feGaussianBlur stdDeviation="3"/>     <feOffset dy="2" dx="2"/>     <feMerge>       <feMergeNode/>       <feMergeNode in="SourceGraphic"/>     </feMerge>            </filter> </defs></svg>

<svg height="150" width="150" id="mySVG">    <g><path d="M0,0 C-72,132 -72,-26 100,100"></path>    </g>    <g class="shadow" >    <circle class="shadow" cx="100" cy="100" r="20"></circle>    </g>  </svg>

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

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.

SVG drop shadow using css3

Here's an example of applying dropshadow to some svg using the 'filter' property. If you want to control the opacity of the dropshadow have a look at this example. The slope attribute controls how much opacity to give to the dropshadow.

Relevant bits from the example:

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

Box-shadow is defined to work on CSS boxes (read: rectangles), while svg is a bit more expressive than just rectangles. Read the SVG Primer to learn a bit more about what you can do with SVG filters.

add drop-shadow to svg polygon

You can apply the drop-shadow filter to the SVG OR use the SVG as a background of an element and apply filter to it:

polygon {  fill: #5091b9;  stroke: #4387b0;  stroke-width: 2;}.filter {  filter: drop-shadow(10px 0 5px red);}
.box {  height: 100px;  width: 100px;  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100"><g transform="translate(50, 50)"><polygon stroke="%234387b0" stroke-width="2" fill="%235091b9" points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" ></polygon></g></svg>');}

<p>SVG element</p><svg viewBox="0 0 100 100" width="100" class="filter"><g transform="translate(50, 50)" ><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" ></polygon></g></svg><p>SVG as background</p><div class="box filter"></div>

How to add shadow to a path element inside SVG on hover

To create a shadow on hover I added a filter developed by @Erik Dahlström: http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow.svg

To make it possible to place the code in the snippet, I added only a few states.

var svg = document.querySelector("svg");var paths = document.querySelectorAll("path.state");
var i = paths.length;while(i--) {  paths[i].addEventListener("mouseover", function(e) {    svg.appendChild(e.target);  });}

.state {fill:white;stroke:dodgerblue;transform-origin: center center;transform-box: fill-box;transition:  1s;}
:hover.state { fill:blue; stroke:white; stroke-width:2px; filter:url(#dropshadow); -webkit-transform: scale(1.5); transform: scale(1.5);  }

<body>   <section id="map">
    <svg version="1.1"       id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="467 -284 959 593" xml:space="preserve">   <defs>    <filter id="dropshadow" height="130%">      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>       <feOffset dx="2" dy="2" result="offsetblur"/>       <feMerge>         <feMergeNode/>        <feMergeNode in="SourceGraphic"/>       </feMerge>    </filter>  </defs>            <g>   <title>"ID" - IDAHO   State capital city - Boise   Population - 228,790   </title>      <path id="ID"  class="state" d="        M615.5-107.5l8.8-35.2l1.4-4.2l2.5-5.9l-1.3-2.3l-2.5,0.1l-0.8-1l0.5-1.1l0.3-3.1l4.5-5.5l1.8-0.5l1.1-1.1l0.6-3.2l0.9-0.7l3.9-5.8        l3.9-4.3l0.2-3.8l-3.4-2.6l-1.5-4.4l13.6-63.3l13.5,2.5l-4.4,21.4l3.6,7.5l-1.6,4.7l2,4.6l3.1,1.3l3.8,9.6l3.5,4.4l0.5,1.1l3.3,1.1        l0.4,2.1l-7,17.4l-0.2,2.6l2.6,3.3l0.9,0l4.9-3l0.7-1.1l1.6,0.7l-0.3,5.4l2.7,12.6l3.9,3.2l1.7,2.2l-0.7,4.1l1.1,2.8l1.1,1.1        l2.5-2.4l2.8,0l2.9,1.3l2.8-0.7l3.8-0.2l4,1.6l2.7-0.3l0.5-3l2.9-0.8l1.3,1.5l0.4,2.9l1.4,1.2l-8.4,53.6        C710.4-89.3,622.5-106,615.5-107.5z"/>   </g>  <g>     <title>   "UT" - Utah   State capital city - Salt Lake City   Population   City 186,440   Estimate Estimate (2018) 200,591   </title>      <path id="UT"  class="state" d="M726.5,26.1l-83.7-11.9        l20.6-112.5l46.8,8.7l-1.5,10.6l-2.3,13.2l7.8,0.9l16.4,1.8l8.2,0.9L726.5,26.1z"/></g>      <g>     <title>   "AZ" - Arizona   State capital city - Phoenix   Population   City 1,445,632   Estimate Estimate (2018) 1,660,272   </title>   <path id="AZ" class="state" d="        M611.9,98.6l-2.6,2.2l-0.3,1.5l0.5,1l18.9,10.7l12.1,7.6l14.7,8.6l16.8,10l12.3,2.4l25,2.7l17.3-119.1l-83.7-11.9l-3.1,16.4l-1.6,0        l-1.7,2.6l-2.5-0.1l-1.3-2.7l-2.7-0.3l-0.9-1.1H628l-0.9,0.6l-1.9,1l-0.1,7l-0.2,1.7l-0.6,12.6l-1.5,2.2l-0.6,3.3l2.7,4.9l1.3,5.8        l0.8,1l1,0.6l-0.1,2.3l-1.6,1.4l-3.4,1.7l-1.9,1.9l-1.5,3.7l-0.6,4.9l-2.9,2.7l-2.1,0.7l0.1,0.8l-0.5,1.7l0.5,0.8l3.7,0.6l-0.6,2.7        l-1.5,2.2L611.9,98.6z"/></g>  <g>     <title>   "NV" - Nevada   State capital city - Carson City   Population   City 55,274   Estimate Estimate (2018) 55,414   </title>      <path id="NV" class="state" d="M663.4-98.4        L639.8,30.4l-1.8,0.3l-1.6,2.4l-2.4,0l-1.5-2.7l-2.6-0.4l-0.8-1.1l-1-0.1l-2.8,1.6l-0.3,6.8l-0.4,5.8l-0.3,8.6l-1.4,2.1l-2.4-1.1        L551.3-51.5l19-67.6L663.4-98.4z"/></g>  <g>     <title>   "OR" - Oregon   State capital city - Salem   Population   City 154,637   Estimate Estimate (2018) 173,442   </title>      <path id="OR" class="state" d="        M615.7-108.5l8.9-34.8l1.1-4.2l2.4-5.6l-0.6-1.2l-2.5,0l-1.3-1.7l0.5-1.5l0.5-3.2l4.5-5.5l1.8-1.1l1.1-1.1l1.5-3.6l4-5.7l3.6-3.9        l0.2-3.5l-3.3-2.5l-1.8-4.6l-12.7-3.6l-15.1-3.5l-15.4,0.1l-0.5-1.4l-5.5,2.1l-4.5-0.6l-2.4-1.6l-1.3,0.7l-4.7-0.2l-1.7-1.4        l-5.3-2.1l-0.8,0.1l-4.3-1.5l-1.9,1.8l-6.2-0.3l-5.9-4.1l0.7-0.8l0.2-7.8l-2.3-3.9l-4.1-0.6l-0.7-2.5l-2.4-0.5l-5.8,2.1l-2.3,6.5        l-3.2,10l-3.2,6.5l-5,14.1l-6.5,13.6l-8.1,12.6l-1.9,2.9l-0.8,8.6l0.4,12.1L615.7-108.5z"/></g>       <g>   <title>   "WA" - Washington Territory   State capital city - Olympia   Population   City 46,478   Estimate (2018) 52,555   </title>      <path id="WA" class="state" class="state" d="        M569.1-276.4l4.4,1.5l9.7,2.7l8.6,1.9l20,5.7l23,5.7l15.2,3.2l-13.6,63.6l-12.4-3.5l-15.5-3.6l-15.2,0l-0.5-1.3l-5.6,2.2l-4.6-0.7        l-2.1-1.6L579-200l-4.7-0.1l-1.7-1.3l-5.3-2.1l-0.7,0.1l-4.4-1.5l-1.9,1.8l-6.3-0.3l-5.9-4.1l0.8-0.9l0.1-7.7l-2.3-3.8l-4.1-0.6        l-0.7-2.5l-2.3-0.5l-3.6,1.2l-2.3-3.2l0.3-2.9l2.7-0.3l1.6-4l-2.6-1.1l0.2-3.7l4.4-0.6l-2.7-2.7l-1.5-7.1l0.6-2.9v-7.9l-1.8-3.2        l2.3-9.4l2.1,0.5l2.4,2.9l2.7,2.6l3.2,1.9l4.5,2.1l3.1,0.6l2.9,1.5l3.4,1l2.3-0.2v-2.4l1.3-1.1l2.1-1.3l0.3,1.1l0.3,1.8l-2.3,0.5        l-0.3,2.1l1.8,1.5l1.1,2.4l0.6,1.9l1.5-0.2l0.2-1.3l-1-1.3l-0.5-3.2l0.8-1.8l-0.6-1.5v-2.3l1.8-3.6l-1.1-2.6l-2.4-4.9l0.3-0.8        L569.1-276.4z M559.6-270.4l2-0.2l0.5,1.4l1.5-1.6h2.3l0.8,1.5l-1.5,1.7l0.6,0.8l-0.7,2l-1.4,0.4c0,0-0.9,0.1-0.9-0.2        s1.5-2.6,1.5-2.6l-1.7-0.6l-0.3,1.5l-0.7,0.6l-1.5-2.3L559.6-270.4z"/>  </g>   <g>   <title>   "CA" - California   State capital city - Sacramento   Population   City 466,488   Estimate (2018) 508,529   </title>      <path id="CA" class="state" d="        M611.7,98.2l3.9-0.5l1.5-2l0.5-2.9l-3.6-0.6l-0.5-0.7l0.5-2l-0.2-0.6l1.9-0.6l3-2.8l0.6-5l1.4-3.4l1.9-2.2l3.5-1.6l1.7-1.6l0.1-2.1        l-1-0.6l-1-1.1l-1.2-5.8l-2.7-4.8l0.6-3.5l-2.4-1L551.3-51.5l18.9-67.6l-67.1-15.7l-1.5,4.7l-0.2,7.4l-5.2,11.8l-3.1,2.6l-0.3,1.1        l-1.8,0.8l-1.5,4.2l-0.8,3.2l2.7,4.2l1.6,4.2l1.1,3.6l-0.3,6.5l-1.8,3.1l-0.6,5.8l-1,3.7l1.8,3.9l2.7,4.5l2.3,4.9l1.3,4l-0.3,3.2        l-0.3,0.5v2.1l5.7,6.3l-0.5,2.4l-0.6,2.3l-0.6,1.9l0.2,8.2l2.1,3.7l1.9,2.6l2.7,0.5l1,2.7l-1.1,3.6l-2.1,1.6h-1.1l-0.8,3.9l0.5,2.9        l3.2,4.4l1.6,5.3l1.5,4.7l1.3,3.1l3.4,5.8l1.5,2.6l0.5,2.9l1.6,1v2.4l-0.8,1.9l-1.8,7.1l-0.5,1.9l2.4,2.7l4.2,0.5l4.5,1.8l3.9,2.1        h2.9l2.9,3.1l2.6,4.9l1.1,2.3l3.9,2.1l4.8,0.8l1.5,2.1l0.6,3.2l-1.5,0.6l0.3,1l3.2,0.8l2.7,0.2l3.2-1.7l3.9,4.2l0.8,2.3l2.6,4.2        l0.3,3.2v9.4l0.5,1.8l10,1.5l19.7,2.7L611.7,98.2z M523.6,54.5l1.3,1.5l-0.2,1.3l-3.2-0.1l-0.6-1.2l-0.6-1.5L523.6,54.5z         M525.5,54.5l1.2-0.6l3.6,2.1l3.1,1.2l-0.9,0.6l-4.5-0.2l-1.6-1.6L525.5,54.5z M546.2,74.3l1.8,2.3l0.8,1l1.5,0.6l0.6-1.5l-1-1.8        l-2.7-2l-1.1,0.2V74.3z M544.7,82.9l1.8,3.2l1.2,1.9l-1.5,0.2l-1.3-1.2c0,0-0.7-1.5-0.7-1.9s0-2.2,0-2.2L544.7,82.9z"/>  </g>    </svg>
  </section></body>

How to have a drop shadow on a transparent rect svg

You can't do this if the original is a fully transparent shape - because of reasons - but you can do this starting from an almost completely transparent original shape and end up with a fully transparent shape surrounded by a normal drop shadow.

Draw your shapes with 1% fill-opacity. When you pull those into a filter, multiply their alpha by 100 using a colormatrix - and use that as the basis for your dropshadow. You won't end up using the original 1% opacity shape in your final version because if you use the "out" operator - this discards the contents of anything that overlaps with the original (processed) shape.

svg {  background: #33D; }

<svg width="500px" height="400px"><defs>  <filter id="trans-shadow">  <feColorMatrix type="matrix" values="1 0 0 0 0                                        0 1 0 0 0                                        0 0 1 0 0                                        0 0 0 100 0"                                       result="boostedInput"/>                                         <feGaussianBlur stdDeviation="5"/>  <feComposite operator="out" in2="boostedInput"/>  </filter></defs>

<circle filter="url(#trans-shadow)" x="100" y="100" r="050" cx="150" cy="150" fill="black" fill-opacity="0.01" />

</svg>

Apply shadow on hidden svg path

The simplest way is by using a mask.

In the demo below we have added a drop shadow to a circle. Then we construct the mask so that it hides the circle itself, but keeps the area outside the circle (ie the shadow). Revealing the red rectangle behind it.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">  <defs>    <filter id="shadow">      <feDropShadow dx="4" dy="8" stdDeviation="4"/>    </filter>    <mask id="invisible">      <rect width="100%" height="100%" fill="white"/>      <circle cx="50%" cy="50%" r="80" fill="black"/>    </mask>  </defs>
  <rect x="40" y="60" width="150" height="80" fill="red"/>
  <circle cx="50%" cy="50%" r="80"      style="fill:blue; filter:url(#shadow); mask: url(#invisible);"/></svg>

Add shadow on a svg path

I believe this is what you want, you can just change the values in the filter to fit your needs.

in plain simple words, not to completact thing:

feOffset: x, y to move the blur shadow effect back and forth.
filter: height to move it up and down

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 169 67.25">  <g style="isolation:isolate">    <g>      <g>        <defs>          <filter id="dropshadow" height="122%">            <feGaussianBlur in="SourceAlpha" stdDeviation="1" />             <feOffset in="blur" dx="0.7" dy="0.7" result="offsetBlur"/>            <feOffset dx="1" dy="1" result="offsetblur" />            <feFlood flood-color="#3D4574" flood-opacity="0.3" result="offsetColor"/>            <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>          </filter>        </defs>        <use xlink:href="#path1" filter="url(#dropshadow)"></use>        <path id="path1" d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>        <use xlink:href="#path2" filter="url(#dropshadow)"></use>        <path id="path2" style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2;" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>            </g>    </g>  </g></svg>

---

Related Topics