Question

我正在使用jVectorMap在div中创建一个地图。

然而，无论我做什么，地图只占用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>

Answer 1

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

我在自定义css中将其更改为：

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

并且还更改了从第2315行开始的jquery-jvectormap.2.0.2.js以获取函数updateSize（）中容器的高度。然后，我在window.resize事件中使用javascript在px中设置容器的宽度和高度。

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

Answer 2

SVG不会自动调整大小，除非它具有viewBox属性。您需要添加一个。它的价值究竟是什么取决于SVG的内容。

添加viewBox后，您需要删除width和height值（或将其设置为"100%" - 这具有相同的效果）。

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

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

2 个答案: