How can I make a custom SVG overlay on Leaflet wit

I have recently started a small project that involves drawing transport scheme on top of the Leaflet map. I've got a collection (array) of points denoting stops, each having an attribute location (LatLng). How can I place them on the map without using native markers but using SVG layer with paths & circles instead and guaranteeing the correct geographical placement of elements on every dragging or zooming of the map?

So far, I've thought of:

Using the SVG overlay provided by Leaflet inside the overlay pane on the map. The problem with this approach is that I have a feeling it was designed specifically for native elements like markers, polylines, etc, but not for custom SVG elements (I haven't found much info on that). And besides, every time I zoom the map in & out, its elements' coordinates don't seem consistent & different all the time.
Appending an SVG overlay into the map container on top of the map panes. That seems fine and you may be sure Leaflet doesn't 'corrupt' your overlay in any way, until you find out that the SVG is not draggable. Which seems to have 2 solutions:

2.1. Assigning the map container's transform traslate3d value to the overlay. This seems to work & does its job simultaneously displacing both map tile layer & the overlay creating illusion as if they are bound together. Each point now has constant position on the SVG, as long as the map is not zoomed, which equals its projected position onto the container minus the difference between the container's & the overlay's top-left corners. So assuming the overlay should fit all the points & the user is shown the centre of the map, the SVG should start beyond the screen thus having negative values of x & y attributes' or left & top CSS properties. Actually, none of it seems to work correctly as the map is either zero size or the size that only fits the very few points in the top-left corner (which is outside the original viewport).

2.2. Creating a large SVG overlay which would cover the entire tile layer of the map. It's almost the same as the previous solution, yet points can now be projected onto the tile layer directly which eliminates the need to compute the container's & the overlay's positions difference all the time. Same problem with the negative values as above.

2.3. Using a static SVG overlay inside the map container & recalculating the position of all of its elements on drag/zoom., which leads to the problem stated in the Leaflet's 'native' overlay approach & seems pretty computationally expensive.

So, are there any better ways to accomplish this (without D3 as I want a more 'native' solution) or maybe I'm just doing something fundamentally wrong which prevents me from achieving the goal?

CSS & element positioning have always been my weak points, so I'm not quite familiar with side effects of using negative values for SVG's x & y properties, left & top and transform's translate in CSS & combining them all together seems to confuse me a lot.