Установка карты по размеру Divin?

Question

Я не могу изменить размер кода на https://codepen.io/sinanelms/pen/MqdNNY. Хотели бы вы помочь карте увеличиваться и уменьшаться в зависимости от размера экрана?

Я работал над следующим, ноне мог делать то, что хотел.

<style type="text/css">
   body{
   background:#fff;}
   #map{
   width:1050px;
   height:620px;
   position:relative;}
   #map svg {
   position: relative;top:
   -100px; 
   left: 0px;}
   svg > a {cursor: pointer;display:block;}
   #sehir{font-size:30px;text-align:center;margin-top:25px;color:#666;}
</style>
<div>
</div>
<div id="sehir"></div>
<div id="map"></div>

Answer 1

используйте изменение размера окна Jquery, чтобы установить width и height с setViewBox и setSize.Посмотрите на приведенный ниже код с изменением размера окна .

JS

var w = 1000, h=500;
var r = Raphael('map', w, h),
attributes = {
    fill: '#666',
    stroke: '#fff',
    'stroke-width':.5,
    'stroke-linejoin': 'round',
},

arr = new Array();

r.setViewBox(10, 100, w,h,true);
r.setSize('100%', '100%');

$(window).resize(function(){
    r.setViewBox(10,100,w,h,true);
    r.setSize('100%', '100%');
});

CSS

#map {
  position: relative;
  border: 1px solid red;
}

#map svg {
  position: relative;
}

svg>a {
  cursor: pointer;
  display: block;
}

Answer 2

пока вы инициируете Raphael с идентификатором map pass width in %.Ниже его инициируется с width 100% и height 800px.

var r = Raphael('map', '100%', '800'),

и также удаляется width & height из встроенного css с #map

#map{
   width:1050px;
   height:620px;
   position:relative;
}