将背景图像添加到jvectormap中的标记

Question

在这里找到了几个关于动态添加SVG模式的解决方案，但它似乎不适用于jvectormap。我认为问题可能是jvectormap在XMLNS标记上没有定义<SVG>属性，但我尝试添加这些属性不起作用。

我还尝试将setAttribute和setAttributeNS的所有pattern更改为image。但没有骰子。

以下是我的尝试（基于此解决方案：How to dynamically change the image pattern in SVG using Javascript）：

// Set namespace for SVG elements.
var svgMap      = $('.jvectormap-container > svg').get(0);
var svgNS       = 'http://www.w3.org/2000/svg';
var svgNSXLink  = 'http://www.w3.org/1999/xlink';

svgMap.setAttribute('xmlns',        svgNS);
svgMap.setAttribute('xmlns:link',   svgNSXLink);
svgMap.setAttribute('xmlns:ev',     'http://www.w3.org/2001/xml-events');

// Create pattern for markers.
var pattern     = document.createElementNS(svgNS, 'pattern');
pattern.setAttribute('id',          'markeryellow');
pattern.setAttribute('patternUnits', 'userSpaceOnUse');
pattern.setAttribute('width',       '38');
pattern.setAttribute('height',      '38');

// Create image for pattern.
var image       = document.createElementNS(svgNS, 'image');
image.setAttribute('x',             '0');
image.setAttribute('y',             '0');
image.setAttribute('width',         '38');
image.setAttribute('height',        '38');
image.setAttributeNS(svgNSXLink, 'xlink:href', '/path/to/image.png');

// Put it together
pattern.appendChild(image);

var defs        =
    svgMap.querySelector('defs') ||
    svgMap.insertBefore(document.createElementNS(svgNS, 'defs'), svgMap.firstChild);
defs.appendChild(pattern);

var $markers    = $(svgMap).find('.jvectormap-marker');
$.each($markers, function(i, elem) {
    $(elem)
        .attr({
            'fill':     'url(#markeryellow)'
        });
});