Javascript SVG（使用简单地图）不在手机上显示

您好（第一次在堆栈溢出上发布，因此对违反礼仪表示歉意…）

我目前正在构建一个React应用程序，其中包含一个使用构建的交互式SVG地图。在我的桌面浏览器中，一切都正常工作，但是地图本身并没有加载到移动设备上（我已经测试了好几个），我不知道为什么。我在下面包含了相关组件中的代码（我删除了代码中一些不相关的部分）：

import React，{memo，Component}来自'React'；
从“react simple maps”导入{ZoomableGroup，ComposableMap，Geographies，Geographics}；
从“./data/topo.json”导入geoUrl；
从“/国家/地区”输入国家/地区
从“react transition group”导入{CSTransition，SwitchTransition}；
类映射扩展组件{
建造师（道具）{
超级（道具）；
此.state={
国家：“，
盘子：“，
说明：“，
照片：“，
配方：“，
选择：false，
}
this.handleBack=this.handleBack.bind（this）；
this.handleAbout=this.handleAbout.bind（this）；
this.handleList=this.handleList.bind（this）；
}
handleEnter（国家、菜肴、描述、照片、食谱）{
这是我的国家({
国家:国家,，
菜：菜，
描述：描述，
照片:照片,，
食谱：食谱
})
}
render（）{
const{country，dish，description，photo，recipe，selected}=this.state；
const countries=geoUrl.objects.ne_50m_admin_0_countries.geometrics；
返回(
{（{geographies}）=>
geographies.map（地理=>
)
}
);
}
}
导出默认备忘录（Map）；

---

如果有人有任何见解，那就太棒了！请让我知道，如果你想看到更多的代码/截图等。谢谢

感谢@Maitham帮助我完善了答案-通过向

添加

style={{{width:“100%”}

属性，问题现在似乎得到了解决！这不应取代

width=“1200”

属性（如果删除此属性，则地图将不会在移动或桌面上渲染），但应添加此属性：

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

---

感谢@Maitham帮助我完善了答案-通过在

中添加

style={{{width:“100%”}

属性，问题现在似乎得到了解决！这不应取代

width=“1200”

属性（如果删除此属性，则地图将不会在移动或桌面上渲染），但应添加此属性：

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

您好，请尝试将宽度从@Maitham更改为谢谢！如果我删除了width=“1200”属性，并将其替换为style={{width:“100%”}，则地图根本不会在移动或桌面上渲染，但是，通过在ComposableMap上同时使用这两个属性，似乎已经解决了问题。非常感谢。两种宽度真奇怪！！不管怎样，欢迎你，好luckHi，尝试将宽度从@Maitham改为谢谢！如果我删除了width=“1200”属性，并将其替换为style={{width:“100%”}，则地图根本不会在移动或桌面上渲染，但是，通过在ComposableMap上同时使用这两个属性，似乎已经解决了问题。非常感谢。两种宽度真奇怪！！不管怎样，欢迎你，祝你好运