jVectorMap呈现错误的大小，似乎没有办法改变它

我正在使用jVectorMap创建一个div内的地图。jVectorMap呈现错误的大小，似乎没有办法改变它

但是，不管我做什么，地图只占用div的一小部分。它似乎是由于<svg style="width: 100px; height: 100px;">

我已经尝试设置包含div的大小，我试过各种CSS解决方案，但它仍然不允许我调整大小。背景颜色调整大小，但SVG元素根本没有。

如何使用jVectorMap调整SVG元素的大小？

这里是我的脚本：

<script> 
$('#map').vectorMap({ 
map: 'world_mill_en', 
    regionsSelectable: 1, 
    regionStyle: { 
    initial: { 
    fill: 'white', 
    "fill-opacity": 1, 
    stroke: 'none', 
    "stroke-width": 0, 
    "stroke-opacity": 1 
    }, 
    hover: { 
    "fill-opacity": 0.8 
    }, 
    selected: { 
    fill: 'blue' 
    }, 
    selectedHover: { 
    } 
    } 
}); 
</script>

来源

2015-04-19 Andrew Alexander

的SVG不会自动调整，除非它有一个viewBox属性。您需要添加一个。它的值需要取决于SVG的内容。

一旦你添加了一个viewBox，你将需要删除的width和height值（或将它们设置为"100%" - 具有相同效果）。

您可能还需要调整preserveAspectRatio属性。它控制缩放行为。

来源

2015-04-20 01:15:55

发生在我身上的同样的问题，这正如你所说，因为容器宽度和高度设置为100％，但后来错误评估为100px。

我在自定义CSS改变了这：

.jvectormap-container { 
    width: inherited; 
    height: inherited; 
}

也改变开始行2315让我的容器的高度在功能updateSize的jQuery的jvectormap.2.0.2.js（）。然后，我用window.resize事件中的javascript设置了px中容器的宽度和高度。

当地图在辅助隐藏页面中初始化时，例如在单个页面的Web应用中，您可能也会遇到此问题，因为计算的宽度和高度尚未访问。希望这有助于。

来源

2015-04-29 16:10:47 deblocker

它为我工作！我无法解释我有多开心！ –

@DiegoPamio：很高兴看到有人开心，所以你正在建立一个全尺寸的地图？也许你会喜欢整个东西......？ – deblocker

我正在构建一个web应用程序，该应用程序将地图作为导航到国家/地区列表的一种形式。 –

jVectorMap呈现错误的大小，似乎没有办法改变它

回答

相关问题