jVectormap 그라디언트 배경 채우기

Question

jVectormap 플러그인에서 그라디언트 배경으로지도를 채울 방법이 있습니까?

나는이 코드를 사용하여 샷을 주었지만, 완전 블랙으로 단색을 나타냈다.

fillColor: { 
     linearGradient: { 
      stops: [ 
       [0, 'rgba(255,255,255,0.5)'], 
       [1, 'rgba(255,255,255,0.0)'], 
      ] 
     } 
}, 

Answer 1

당신은지도의 <defs> 요소에 그라데이션 요소를 추가 한 다음 해당 ID에 fill 속성을 연결할 수 있습니다. 그라디언트를 추가하려면 d3.js와 그라데이션 정의를 추가지도를 초기화 3d.js 라이브러리

를 사용하고 채우기 속성

$(function() { 
    $('#map').vectorMap({ 
     map: 'world_mill_en', 
     regionStyle: { 
      initial: { 
       fill: 'url(#my-gradient)' 
      }, 
     } 
    }); 
}); 

을 설정할 수 있습니다

$(function() { 
    var defs = d3.select('defs'); 
    var myGradient = defs.append('linearGradient') 
     .attr('id', 'my-gradient') 
     .attr('x1', '0%') 
     .attr('y1', '100%') 
     .attr('x2', '100%') 
     .attr('y2', '0%'); 
    myGradient.append('stop') 
     .attr('offset', '0%') 
     .attr('style', 'stop-color:rgb(255,255,255)') 
     .attr('stop-opacity', 1); 
    myGradient.append('stop') 
     .attr('offset', '100%') 
     .attr('style', 'stop-color:rgb(51,51,51)') 
     .attr('stop-opacity', 1); 
}); 

Answer 2

당신이 경우 d3.js를 사용하고 싶지 않습니다.이 함수를 사용하여 svg로 그라디언트를 설정했습니다.

function createGradient(svg, id, stops) { 
    var svgNS = svg.namespaceURI; 
    var grad = document.createElementNS(svgNS, 'linearGradient'); 
    grad.setAttribute('gradientUnits', 'userSpaceOnUse'); 
    grad.setAttribute("x1", "0%"); 
    grad.setAttribute("x2", "0%"); 
    grad.setAttribute("y1", "0%"); 
    grad.setAttribute("y2", "100%"); 
    grad.setAttribute('id', id); 

    for (var i = 0; i < stops.length; i++) { 
     var attrs = stops[i]; 
     var stop = document.createElementNS(svgNS, 'stop'); 
     for (var attr in attrs) { 
      if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr, attrs[attr]); 
     } 
     grad.appendChild(stop); 
    } 

    var defs = svg.querySelector('defs') || svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild); 
    return defs.appendChild(grad); 
}; 


function initializeMapColors() { 
    createGradient($('svg')[0], 'MyGradient', [{ 
    offset: '0%', 
    'stop-color': '#D96B6C' 
    }, { 
    offset: '100%', 
    'stop-color': '#E35980' 
    }]); 

    $('path').attr('fill', 'url(#MyGradient)'); 
}; 

initializeMapColors();