在 jVectormap插件,有没有办法让 map 填充渐变背景?
我尝试执行这段代码,但它确认只是纯全黑。
fillColor: {
linearGradient: {
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, 'rgba(255,255,255,0.0)'],
]
}
},
最佳答案
如果你不想使用 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();
关于javascript - jVectormap渐变背景填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20592029/