svg - Adding background image to markers in jvectormap -

found couple of solutions here adding svg patterns dynamically doesn't seem work jvectormap. think problem may there no xmlns attribute defined on <svg> tag jvectormap attempt add these attributes not work.

i tried changing of setattribute setattributens pattern , image. no dice.

here attempt (based on solution: how dynamically change image pattern in svg using javascript):

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