jVectorMap отображает неправильный размер, и, похоже, нет способа его изменить.

Я использую jVectorMap для создания карты внутри div.

Однако, что бы я ни делал, карта занимает лишь небольшую часть div. Кажется, это из-за <svg style="width: 100px; height: 100px;">

Я попытался установить размер содержащего div, я пробовал различные решения css, но он по-прежнему не позволяет мне изменять размер. Цвет фона изменяется, а элемент SVG просто нет.

Как изменить размер элемента SVG с помощью jVectorMap?

Вот мой сценарий:

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

javascript svg html jquery jvectormap
person Steven Matthews    schedule 19.04.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

та же проблема произошла со мной, это именно то, что вы говорите, потому что ширина и высота контейнера установлены на 100%, но затем неправильно оцениваются как 100 пикселей.

Я изменил это в своем пользовательском css на:

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

а также изменил jquery-jvectormap.2.0.2.js, начиная со строки 2315, чтобы получить высоту моего контейнера в функции updateSize(). Затем я устанавливаю ширину и высоту контейнера в пикселях с помощью javascript в событии window.resize.

Вы также можете столкнуться с этой проблемой, когда карта инициализируется на вторичной скрытой странице, например, в одностраничном веб-приложении, поскольку рассчитанные ширина и высота еще недоступны. Надеюсь это поможет.

person deblocker    schedule 29.04.2015
comment
@DiegoPamio: приятно видеть кого-то счастливым, так что вы строите полноразмерную карту? может быть, вы хотели бы все это...? - person deblocker; 30.05.2017
comment
Я создаю веб-приложение, в котором есть карта как форма навигации по спискам стран. - person Diego Pamio; 05.06.2017

arrow_upward
0
arrow_downward

SVG не будет автоматически изменять размер, если у него нет атрибута viewBox. Вам нужно будет добавить один. Какими именно должны быть его значения, будет зависеть от содержимого SVG.

После того, как вы добавили viewBox, вам нужно будет удалить значения width и height (или установить для них значение "100%", что имеет тот же эффект).

Вам также может понадобиться настроить атрибут preserveAspectRatio. Он управляет поведением масштабирования.

person Paul LeBeau    schedule 20.04.2015