javascript - jVectormap渐变背景填充

Question

在 jVectormap插件，有没有办法让 map 填充渐变背景？

我尝试执行这段代码，但它确认只是纯全黑。

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

Answer 1

如果你不想使用 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();