Di più

Aggiungi il filtro svg ai percorsi creati dal volantino?

Aggiungi il filtro svg ai percorsi creati dal volantino?


Se dovessi creare un semplice svg in linea, potrei modificare i percorsi per avere un'ombra esterna o una sfocatura creando unAll'interno di unaraggruppamento. Tuttavia, Leaflet genera dinamicamente gli SVG che utilizza per visualizzare i percorsi e non sono sicuro di come aggiungere un filtro dopo il fatto.

Idee fallite:

  • Ho provato a usare jQuery per aggiungere un defs a SVG dopo il fatto:

Come questo:

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

E poi specifica la posizione dei defs nel mio CSS, in questo modo:

filter: url("… /index.html#dropshadow");
  • Avere la/ definizione del filtro già in linea nell'html sopra l'elemento della mappa, quindi fare riferimento alla definizione del filtro dallo svg tramite un URL del filtro CSS.

Il mio codice (in linea sopra l'opuscolo map div):

          

Suggerirei di seguire il tuo secondo approccio per mettere in linea il markup svg. Penso che il tuo metodo jQuery prepend non funzioni perché devi crearee altri figli dielementi che utilizzano document.createElementNS e jQuery sta probabilmente utilizzando document.createElement.

Ad ogni modo, il pezzo che ti manca è applicare il tuo filtro al tuo svg, cosa che potresti fare in due modi.

Approccio CSS:

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

$ approccio (metti questo dopo aver aggiunto il tuo geojson alla tua mappa):

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