set position of svg path in world map svg

524 Views Asked by At

I have one world map with the SVG format and I am trying to set the position of the selected country in the center of the screen using jquery

I am using this SVG map in my project

SVG Map image link

$('#hidemap').on('click', function() {
    $('path').attr('display','none');    
    var c = cnt.options[cnt.selectedIndex].value;
    $('#'+c).attr('display','block');
    $('#'+c).css("transform-origin", "center center 0");
    $('#'+c).css("transform-box"," fill-box");
    $('#'+c).css("stroke", "black");
    $('#'+c).css("transform"," scale(2)");
    var d = document.getElementById(c).getAttribute("d").replace(/\r?\n|\r/g, "");
    console.log(d);
    var height = parseInt($('#'+c)[0].getBoundingClientRect().height);
    var width = parseInt($('#'+c)[0].getBoundingClientRect().width);    
    var transform_Y = (height/2) - ($(window).height() / 2);
    var transform_X = (width/2) - ($(window).width() / 2);    
    d_array = d.split(",");
    d_array[0].slice(0);
    var $box = $("#svg_div");    
    width_array =d_array[0].split(" ");
    height_array =d_array[1].split(" ");
    width_array[1] = 1000;
    height_array[0] = 500;
    console.log(width_array);
    d_array[0] = width_array[0]+" "+width_array[1];
    d_array[1] = height_array[0]+" "+height_array[1];
    var string_array = d_array.toString();
    console.log(string_array);
    document.getElementById(c).setAttribute("d",string_array );   
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

above is my code so now i want to draw selected country map in center of scree if selected map is on left side or right side

please help me out for this issue

0

There are 0 best solutions below