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 }} >