How to add external svg file (by D3.js) to Leaflet map

Question

I have a problem about Leaflet.js map and D3.js external svg file. I would like to know how to add external svg file (now I use D3.js) to Leaflet map.

I found a lot of tutorial but they use .json : http://bost.ocks.org/mike/leaflet/

I tried everything (with my knowledge) to move external svg image to overlay layer on Leaflet map but I can't do it.

Please help me : Here is my jsfiddle

Thanks everyone for read and answer. :)

Answer 1

user3667118's answer is correct given question which is just overlaying the SVG image on top the leaflet layer.

However once you zoom in and out, you will see the the leaflet layer re-sizes but the overlaid image remains the same size.

You will need first make sure that the initial overlay is positioned and sized correctly and then be able to proportionally re-size itself every time the leaflet layer is re-sized.