JS React "react-simple-maps" - Abstand entfernen?

Ich habe das Problem, dass sich um die Italien-Karte herum ein Abstand befindet und ich weiß nicht, wie ich den entfernen kann.

Code:

const geoUrl = "https://raw.githubusercontent.com/deldersveld/topojson/master/countries/italy/italy-regions.json"


  const MapChart = () => {
    return (
      <ComposableMap projectionConfig={{ center: [11, 39], scale: 1800 }}>
        <Geographies geography={geoUrl}>
          {({ geographies }) =>
            geographies.map((geo) => (
              <Geography key={geo.rsmKey} geography={geo} className='geography'/>
            ))
          }
        </Geographies>
      </ComposableMap>
    )
  }

Und CSS:

.geography {
  fill: #f0f0f0;
  stroke: #fff;
  stroke-width: 1;
  outline: none;
}

.geography:hover {
  fill: #979797;
}

Noch zwei Bilder:

Im unteren Bild sieht man den Abstand. Beim oberen Bild sieht man den Code der erstellt wird. In der unteren Zeile befindet sich die Karte. In der oberen Zeile ist so eine Art "Box" durch die der Abstand ensteht.

Gibt es dafür CSS Einstellungen oder was kann ich machen um den Abstand zu entfernen?

Answer 1

[regex9]

Mit dem viewBox-Attribut wird der sichtbare Bereich (sichtbare Bildausschnitt) der SVG-Grafik bestimmt. Bei dir erstreckt er sich von P(0/0) bis Q(800/600).

Wenn du den Bereich verkleinerst, löst du wahrscheinlich auch dein Problem.