如何为Leaflet加载GeoJSON生成的SVG设置匹配CSS的样式？

已经通过GeoJSON文件在Leaflet中成功显示地图，但自定义CSS与实际显示的SVG样式不匹配（如下图），需要将overflow设置为visible。

自定义CSS代码 #

body, #map {
   overflow: visible;
   zoom: 100%;
   width: 1500px;
   height: 1000px;
   margin: 0px;
   padding: 0px;
}

实际生成的SVG结构 #

<body>
<div id="map" class="leaflet-container leaflet-touch leaflet-fade-anim" tabindex="0" style="position: relative;"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"></div><div class="leaflet-pane leaflet-overlay-pane">
<svg pointer-events="none" width="1800" height="1200" viewBox="-150 -100 1800 1200" style="transform: translate3d(-150px, -100px, 0px);">
<g>~~~</g>
</svg>~~~

疑问 #

明明给#map设置了width:1500px、height:1000px，为什么实际生成的SVG却是width:1800、height:1200？

加载GeoJSON的代码 #

$.getJSON("japan.geojson", function(data) {
    let geojsonback = L.geoJson(data, {
        onEachFeature: function (feature, layer) {
                    },
    });
    geojsonback.addTo(map);
    });

尝试过的无效方案 #

曾尝试给GeoJSON图层添加自定义样式，但没有效果：

const myPolygonStyle={
    "width":1500,
    "viewBox":"0 0 1500 1000"
}
$.getJSON("japan.geojson", function(data) {
    let geojsonback = L.geoJson(data, {
        style:myPolygonStyle,
        onEachFeature: function (feature, layer) {
                    },
    });
    geojsonback.addTo(map);
    console.log(geojsonback)
    });

内容的提问来源于stack exchange，提问作者Kota