2

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

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

这是我的尝试（基于此解决方案：如何使用 Javascript 动态更改 SVG 中的图像模式）：

// 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)'
        });
});
4

0 回答 0