Javascript 使用内嵌svg作为基础层的传单

目前，我提供了一个带有imageOverlay基础层的地图。 现在，我需要使用svg而不是当前的png imageOverlay， 动态地改变svg css（比如，改变最近位置（svg中的路径）的不透明度等）， 因此，基本上，我需要动态控制实际的MAPSVG样式

我决定我需要使用内联svg来改变svg的样式， 而不是带有svg源的图像

我尝试在运行时用实际的内联svg替换传单创建的图像覆盖。 它起作用了，但缩放控制将不再影响图层， 交换层有点麻烦。 传单是否具有支持此类要求的内部功能

加一把小提琴来更好地解释它

var map = L.map('map', {
    center: [40.75, -74.2],
    zoom: 13
});
var imageUrl = 'https://rawgit.com/VengadoraVG/moving-to-gnulinux/master/img/tux.svg',
    imageBounds = [
        [40.712216, -74.22655],
        [40.773941, -74.12544]
    ];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
setTimeout(() => {
    var $img = $('.leaflet-image-layer');
    var imgURL = $img.attr('src');
    var attributes = $img.prop("attributes");

    $.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = $(data).find('svg');

        // Remove any invalid XML tags
        $svg = $svg.removeAttr('xmlns:a');

        // Loop through IMG attributes and apply on SVG
        $.each(attributes, function() {
            $svg.attr(this.name, this.value);
        });

        // Replace IMG with SVG
        $img.replaceWith($svg);
    }, 'xml');
}, 2000);