SVG（使用 React Simple Maps）不显示在移动设备上

Question

我目前正在构建一个 React 应用程序，其中包含一个使用React Simple Maps构建的交互式 SVG 地图。在我的桌面浏览器中，一切都按预期工作，但是地图本身不会加载到移动设备上（我已经测试了几个）而且我不明白为什么。我在下面包含了相关组件的代码（我删除了代码中一些不相关的部分）：import React, { memo, Component } from 'react';import { ZoomableGroup, ComposableMap, Geographies, Geography } from "react-simple-maps";import geoUrl from "../data/topo.json";import Country from './Country'import { CSSTransition, SwitchTransition } from "react-transition-group";class Map extends Component {     constructor(props){        super(props);        this.state = {            country: "",            dish: "",            description: "",            photo: "",            recipe: "",            selected: false,        }        this.handleBack = this.handleBack.bind(this);        this.handleAbout = this.handleAbout.bind(this);        this.handleList = this.handleList.bind(this);    }    handleEnter(country, dish, description, photo, recipe){        this.setState({            country: country,            dish: dish,            description: description,            photo: photo,            recipe: recipe        })    }        render(){             const { country, dish, description, photo, recipe, selected } = this.state;        const countries = geoUrl.objects.ne_50m_admin_0_countries.geometries;        return(            <SwitchTransition>                <CSSTransition                    classNames="transition"                    transitionAppearTimeout={50000}                    key={ selected }                    in={ selected }                    unmountOnExit                    appear                >                             <> 如果有人可能有任何见解，那将是太棒了！如果您想查看更多代码/屏幕截图等，请告诉我。谢谢！javascript反应反应本机svg地图

Answer 1

style={{width: "100%"}}- 通过添加to的属性<ComposableMap>，问题现在似乎已解决！这不应该替换width="1200"属性（如果你删除这个地图将不会在移动或桌面上呈现），但应该是除了它：

<ComposableMap width="1200" style={{ width: "100%" }} data-tip="" projectionConfig={{ scale: 200 }} >