배열에서 거대한 svg를 그려 부모 요소 내에서 축척합니다.

Question

svg 파일 (러시아지도)을 가져 와서 경로 배열을 가져 왔습니다. 여기에 코드 조각입니다 : 이제

var states = [ 
    { 
     id: "1", 
     d: [ 
      "m 6477.42,3306.03 -13.31,-25.82 -71.82,-40.46 -52.18,49.61 -52.21,5.21 -74.43,-48.3 -50.89,-62.66 -18.29,-63.95 -33.92,-10.44 -41.79,20.88 -40.45,-3.91 -20.89,-27.42 -18.28,15.67 -16.97,-18.29 -20.86,19.59 29.99,30.02 -70.47,5.23 -40.47,-35.25 22.19,-75.71 -40.47,-39.15 v 58.73 h -27.41 l -27.41,-24.8 -6.52,30.03 40.47,36.55 -43.09,-2.62 -127.92,-65.26 24.8,-30.02 -36.54,-35.25 14.35,-26.1 26.12,13.06 2.61,-37.87 31.32,-36.55 -48.31,-11.74 -14.35,-19.59 13.06,-31.31 -39.15,-6.54 -52.22,15.67 -15.66,-58.73 -88.78,15.66 v -130.53 l -62.64,10.43 -96.61,87.46 35.25,24.8 -58.72,87.46 -37.87,18.27 -57.43,-19.57 -63.95,24.79 -9.15,-99.2 -116.16,-49.6 -44.38,30.03 6.51,23.48 -118.77,1.31 -31.34,-41.77 -7.84,-27.42 -7.81,40.47 -22.21,19.59 -26.09,-27.42 -36.2,-18.09 -2,-24.87 16.91,-22.54 0.33,-0.46 0.12,-0.55 7.67,-40.21 55.94,-79.12 0.45,-0.64 v -0.75 -51.52 l 28.54,-34.24 1.6,-1.9 -1.94,-1.56 -65.19,-51.76 -3.76,-30.04 -0.09,-0.58 -0.31,-0.48 -15.27,-22.91 -11.52,-55.77 -0.47,-2.19 -2.19,0.27 -31.96,3.76 -51.6,-42.03 -0.19,-0.16 -0.23,-0.12 -17.33,-8.94 40.92,-62.56 0.34,-0.53 0.06,-0.61 13.89,-174.86 0.09,-1.01 -0.7,-0.8 -35.98,-39.78 23.73,-18.27 1.21,-0.92 -0.31,-1.49 -9.69,-46.47 21.04,-22.95 0.61,-0.68 v -0.95 -32.49 l 24.81,-17.16 1.54,-1.09 -0.64,-1.78 -11.95,-31.76 -0.13,-0.42 -0.26,-0.31 -37.29,-45.14 -3.59,-32.32 h 60.85 0.84 l 0.68,-0.54 26.43,-20.75 28.33,18.88 1.86,1.23 1.41,-1.74 15.89,-19.85 1.26,-1.63 -0.1,-0.12 20.81,-31.53 1.34,-2.06 -2.08,-1.34 -23.59,-15 v -27.92 l 26.12,-2.02 21.77,15.25 2.28,1.57 1.26,-2.44 26.99,-51.74 0.3,-0.55 -0.02,-0.66 -2.2,-61.47 34.69,-19.53 1.6,-0.89 -0.42,-1.8 -15.56,-64.4 19.47,-43.22 43.93,-13.17 2.57,-0.79 -1.06,-2.5 -33.56,-78.36 -6.66,-97.48 33.75,-35.87 36.52,27.92 0.58,0.45 0.8,0.03 54.85,2.18 19.57,34.84 1.57,2.77 2.28,-2.24 29.63,-29.63 38.56,44.96 60.58,130.15 0.53,1.15 1.26,0.22 40.51,6.75 0.68,0.11 0.61,-0.26 78.72,-31.48 1.05,-0.42 0.36,-1.07 17.13,-51.42 47.04,21.4 1.24,0.56 1.15,-0.78 29.24,-20.25 0.55,-0.39 0.29,-0.63 52.97,-120.12 68.83,-127.58 43.32,28.33 0.19,0.14 0.22,0.08 45,18.01 1.31,0.53 1.13,-0.89 34.37,-27.95 18.68,16.63 1.66,1.45 1.62,-1.48 27.53,-25.42 25.34,25.33 0.73,0.76 1.06,-0.03 62.97,-2.27 0.81,-0.03 0.63,-0.48 39.4,-30.64 77.45,28.76 1.33,0.47 1.07,-0.89 25.81,-21.52 106.58,48.85 0.73,0.36 0.78,-0.17 30.78,-6.6 33.46,12.53 -4.16,25.02 -0.31,1.74 1.57,0.82 82.46,42.88 -20.62,58.14 -0.5,1.37 1.01,1.08 27.7,29.68 -11.47,28.65 -52.74,34.49 -1.83,1.2 1.02,1.94 27.74,53.56 -51.62,35.72 -2.22,1.55 1.77,2.03 24.05,28.08 v 118.19 1.65 l 1.57,0.61 101.22,38.46 3.96,45.72 0.2,2.07 2.07,0.15 60.02,3.98 13.65,37.08 -2.02,38.5 -0.09,1.63 1.5,0.7 28.92,13.49 -21.8,77.25 -40.32,28.26 -1.43,0.98 0.47,1.66 26.46,93.69 -36.65,97.81 -0.48,1.27 0.81,1.05 20.53,26.7 1.07,1.39 1.63,-0.57 71.25,-24.41 45.47,9.88 15.9,27.81 0.59,1.02 1.18,0.17 53.87,7.99 9.61,34.55 -89.65,185.98 -0.34,0.74 0.14,0.78 9.09,45.47 0.21,0.94 0.78,0.57 60.1,42.42 -22.66,43.58 -0.85,1.63 1.35,1.26 58.19,54.56 0.6,0.57 0.81,0.08 51.82,5.36 29.74,33.25 5.27,58.01 -33.64,30.09 -0.75,0.69 -0.06,1.01 -1.78,37.5 -21.48,32.19 -1.12,1.72 1.52,1.41 25.59,23.88 -27.61,32.8 -1.52,1.77 1.71,1.57 67.29,61.83 0.31,0.3 0.42,0.15 30.26,12.46 22.44,32.81 -42.39,88.28 h -53.02 -0.51 l -0.48,0.2 -41.82,18.18 -0.92,0.42 -0.36,0.94 -21.83,56.38 -0.54,1.35 0.96,1.09 84.87,99.35 v 48.81 l -111.04,83.3 v 0", 
      "m 4743.9,2834.2 30.11,-23.91 13.82,21.81 4.61,18.03 -16.74,10.48 -20.09,2.94 -11.71,-29.35 v 0", 
      "m 5337.71,3240.7 6.6,-29.65 26.35,-30.76 16.48,6.59 -19.77,36.25 -29.66,17.57 v 0", 
      "m 5426.68,3074.84 50.53,-6.58 2.19,-25.27 -19.77,-5.49 -23.05,14.29 -9.9,23.05 v 0", 
      "m 5531.02,3332.96 23.09,-35.15 42.83,-8.79 1.09,49.44 -14.29,24.16 -50.52,3.28 -26.35,-18.66 -40.63,6.59 -3.3,-27.46 24.15,-25.26 -13.16,-15.39 -38.46,31.86 -46.14,-4.4 -3.28,-37.34 4.4,-38.44 20.84,-26.35 7.7,-29.66 42.83,-12.08 39.54,3.29 -3.28,41.74 28.57,-3.29 21.96,36.24 26.34,-5.49 17.58,19.76 -17.58,17.58 -38.42,10.98 -30.75,36.25 25.24,6.59 v 0", 
      "m 5559.58,3158.32 8.79,-40.63 h 20.87 l 4.39,36.24 -20.87,17.57 -13.18,-13.18 v 0", 
      "m 5605.7,3124.28 v -46.14 l 51.62,10.98 48.34,25.27 -16.46,37.35 -31.88,4.39 -24.15,5.49 -17.58,-26.37 -9.89,-10.97 v 0", 
      "m 5622.19,3381.28 15.39,-32.95 98.83,-1.09 28.57,52.72 -18.69,40.64 -20.86,-23.08 -40.64,3.3 -10.98,-18.66 h -21.96 l -3.29,-21.97 -26.37,1.09 v 0", 
      "m 5583.74,3546.04 -6.58,-24.16 19.78,-4.4 7.66,20.87 -20.86,7.69 v 0", 
      "m 6315.25,3332.96 -6.6,-18.68 16.49,-10.98 18.64,10.98 -6.57,23.06 -21.96,-4.38 v 0" 
     ] 
    }, 
    { 
     id: "2", 
     d: [ 
      "m 7478.07,3285.08 -12.8,141.33 -39.16,22.18 92.68,63.97 -13.05,43.08 -172.31,14.36 -20.87,-27.42 -47.01,-3.91 -5.19,-36.55 -37.86,2.61 v 50.91 l 43.05,14.36 16.99,35.23 -9.16,92.68 -16.96,6.52 -20.9,-13.04 -1.29,33.93 -40.47,-15.65 -27.41,31.32 10.45,50.9 33.93,-30.01 19.57,15.66 28.73,-31.33 16.96,39.16 -3.9,46.99 31.31,26.11 54.83,-5.23 91.36,69.18 -22.18,26.12 45.69,-6.53 -1.29,44.38 -49.6,-9.14 -14.38,31.32 -66.57,13.06 26.13,32.63 -33.96,24.8 31.34,22.19 -39.18,50.92 -110.94,-65.28 -6.54,-53.51 -30.02,-39.16 74.42,-30.02 -40.46,-18.28 -120.1,32.63 -139.67,-92.67 -208.84,-113.56 -56.14,-91.38 5.22,-27.4 -37.86,-10.44 -53.5,-48.3 37.86,-47 33.92,10.44 50.92,-28.72 -5.22,-50.91 -46.98,-5.21 -31.35,-18.27 -66.56,41.76 v -84.84 l -67.89,-50.92 -26.2,-50.74 112.68,-84.51 0.99,-0.73 v -1.2 -50.92 -0.89 l -0.6,-0.69 -84.53,-98.93 20.95,-54.07 40.42,-17.57 h 54.06 1.51 l 0.68,-1.4 21.26,-44.28 35.1,-5.28 1.18,-0.17 0.57,-1.04 22.52,-39.85 47.07,22.65 0.87,0.42 0.93,-0.29 44.15,-14.12 33.5,29.98 0.63,0.57 0.84,0.06 51.81,3.57 38.48,40.24 -7.05,38.8 -0.39,2.09 2.05,0.66 38.76,12.33 10.56,36.94 0.45,1.58 1.63,0.17 33,3.48 10.42,31.25 0.42,1.29 1.31,0.3 60.81,14.31 15.84,28.16 0.65,1.15 1.32,0.09 90.93,5.46 1.8,0.1 0.63,-1.7 21.03,-57.85 63.27,19.33 0.37,0.12 0.39,-0.01 69.15,-1.78 55.81,160.18 0.92,2.66 2.5,-1.3 33.68,-17.73 43.08,13.06 v 0", 
      "m 6609.14,3956.42 56.3,-66.71 12.31,12.31 15.36,76.96 18.43,35.92 -20.48,27.71 -51.2,-4.1 -30.72,-46.19 v -35.9 0" 
     ] 
    }, 
    { 
     id: "3", 
     d: [ 
      "m 6754.17,2018.43 34.94,23.04 23.5,19.59 32.64,7.83 -10.45,66.56 57.44,18.28 44.38,39.16 40.46,1.31 -30.01,-43.09 28.73,-24.8 41.75,47 10.45,74.4 37.83,14.36 30.02,39.16 -31.3,23.5 -27.42,-33.95 -28.71,27.42 -7.83,134.45 -24.79,79.62 7.8,58.75 48.31,69.18 27.41,1.29 13.06,39.16 56.11,-77.02 39.18,6.54 2.61,28.72 -9.15,58.74 -9.91,41.36 -37.7,21.26 -1.01,0.56 -0.19,1.1 -7.2,37.7 -24.27,22.54 -39.22,-3.56 -1.83,-0.17 -0.67,1.72 -23.34,61.07 -33.51,7.04 -0.96,0.21 -0.55,0.8 -53.73,78.07 -37.94,-39.66 -0.69,-0.7 -0.91,-0.06 -51.91,-3.58 -33.92,-30.35 -1.05,-0.93 -1.32,0.43 -44.54,14.25 -48.22,-23.23 -2.05,-0.98 -1.13,1.99 -23.05,40.77 -30.68,4.61 19.84,-41.33 0.61,-1.27 -0.79,-1.15 -23.64,-34.56 -0.42,-0.59 -0.67,-0.28 -30.51,-12.57 -65.27,-59.97 27.61,-32.77 1.49,-1.77 -1.68,-1.57 -25.79,-24.05 20.7,-31.02 0.37,-0.54 0.02,-0.69 1.78,-37.19 33.78,-30.23 0.92,-0.8 -0.1,-1.22 -5.48,-60.01 -0.06,-0.81 -0.53,-0.6 -30.93,-34.55 -0.61,-0.7 -0.93,-0.1 -51.93,-5.37 -56.25,-52.73 22.77,-43.83 0.99,-1.89 -1.74,-1.23 -61.04,-43.07 -8.73,-43.74 88.44,-183.53 40.81,27.19 0.98,0.66 1.12,-0.39 92.4,-30.8 1.35,-0.45 0.28,-1.37 10.26,-51.32 0.16,-0.86 -0.42,-0.78 -21.96,-39.97 16.6,-33.22 36.7,27.03 0.66,0.47 h 0.78 47.21 1.43 l 0.67,-1.22 23.29,-40.7 v 0" 
     ] 
    }, 
... 

, 나는이 데이터를 기반으로 페이지의 SVG 요소를 생성하고 싶습니다.

// I put <svg id="mapSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" /> tag on the page 
$.each(states, function(index, value) { 
    var newpath = document.createElementNS('http://www.w3.org/2000/svg',"path"); 
    newpath.setAttributeNS(null, "id", value.id); 
    newpath.setAttributeNS(null, "d", value.d); 
    newpath.setAttributeNS(null, "stroke", "black"); 
    newpath.setAttributeNS(null, "stroke-width", 3); 
    newpath.setAttributeNS(null, "opacity", 1); 
    newpath.setAttributeNS(null, "fill", "none"); 
    document.getElementById('mapSVG').appendChild(newpath); 
    console.log(index + ": " + value.d); 
}); 

var svg = $("#mapSVG").get(0); 
var w = svg.width.baseVal.value; 
var h = svg.height.baseVal.value; 
svg.setAttribute('viewBox', '0 0 '+w+' '+h); 
svg.setAttribute('width', '100%'); 
svg.setAttribute('height', '100%'); 
console.log('viewBox', '0 0 '+w+' '+h); 

페이지를로드 할 때 비어있는 SVG 요소가 표시되지만 DevTool에서 모든 경로가 적절한 위치에 있는지 확인할 수 있습니다. 문제는 SVG가 정확하게 확장되지 않는다는 것입니다! 경로가 뷰포트에서 너무 멀리 떨어져 있습니다.

그럼 내 자신의 데이터 배열을 시도하고 꽤 잘 렌더링합니다. 모든 선을 볼 수 있으며 뷰포트에 맞습니다.

d: [ 
    "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041", 
    "M 7500,167.857443 C 278.282714,920.428571 20.016862,110.64801 190.714286,12.85714 50.78762,13.7649 2.79376,6.16041 102.79376,56.16041" 
] 

궁극적 인 목표는 부모 요소 안에지도를 그립니다. 누군가가 나에게 제대로 할 수있는 조언을 해줄 수 있습니까?

Answer 1

경로에 쓰레기가 많이 있습니다. 이 휴지통을 제거한 후지도가 완벽하게 렌더링됩니다.

var svgMap = function(options){ 

    var vars = { 
     svg : null, 
     width: 0, 
     heigth: 0, 
     strokeWidth: 10 
    }; 

    /* 
    * Can access this.method 
    * inside other methods using 
    * root.method() 
    */ 
    var root = this; 

    /* 
    * Constructor 
    */ 
    this.construct = function(options){ 
     $.extend(vars , options); 

     vars.svg = $('#'+vars.svgId).get(0); 

     draw(vars.svg, vars.states); 
    }; 

    /* 
    * Draws the paths from array 
    */ 
    var draw = function(svg, states) { 
     $.each(states, function(index, value) { 
      var path = document.createElementNS('http://www.w3.org/2000/svg',"path"); 
      path.setAttributeNS(null, "id", value.id); 
      path.setAttributeNS(null, "d", value.d); 
      path.setAttributeNS(null, "stroke", "black"); 
      path.setAttributeNS(null, "stroke-width", vars.strokeWidth); 
      path.setAttributeNS(null, "opacity", 1); 
      path.setAttributeNS(null, "fill", "none"); 
      svg.appendChild(path); 
     }); 
     adaptViewBox(svg); 
    }; 

    /* 
    * Adapts dimension of SVG according it paths 
    */ 
    var adaptViewBox = function(svg) { 
     var bbox = svg.getBBox(); 
     svg.setAttribute('viewBox', '0 0 '+bbox.width+' '+bbox.height); 
    }; 

    /* 
    * Pass options when class instantiated 
    */ 
    this.construct(options); 

}; 

var map = new svgMap({ 
    svgId : 'mapSVG', 
    states: ruStates 
});