More

Add svg filter to paths created by leaflet?


If I were to create a simple inline svg, I could modify paths to have a drop shadow or a blur by creating awithin agrouping. However, Leaflet dynamically generates the SVGs it uses to display paths, and I'm not sure how to add a filter after the fact.

Failed Ideas:

  • I've tried using jQuery to append a defs to the SVG after the fact:

Like this:

$("svg").prepend("     ");

And then specify the location of the defs in my CSS, like this:

filter: url("… /index.html#dropshadow");
  • Have the/ filter definition already inline in the html above the map element, and then reference the filter definition from the svg via a the CSS filter URL.

My code (inline above the leaflet map div):

          

I'd suggest going with your second approach of putting your svg markup in-line. I think your jQuery prepend method doesn't work because you need to createand other children ofelements using document.createElementNS and jQuery is probably using document.createElement.

Anyway, the piece you're missing is applying your filter to your svg, which you could do two ways.

CSS approach:

div.leaflet-overlay-pane svg > g path { filter: url(#dropshadow); }

$ approach (put this after you add your geojson to your map):

$("div.leaflet-overlay-pane svg > g path").css({ filter: "url(#dropshadow)" });