JavaScriptを使用してSVGの画像パターンを動的に変更する方法

Question

Javascriptを使用してページ上の既存のSVGに画像パターンを動的に変更/追加するにはどうすればよいですか？または任意のライブラリ。これは私がこれまで持っているものである

..あなたがのxlink名前空間にある属性を設定するためにsetAttributeNSを使用するneeed

function addSvgStuff(svg, id) { 

    var svgNS = svg.namespaceURI; 
    var pattern = document.createElementNS(svgNS, 'pattern'); 

    pattern.setAttribute('id', id); 
    pattern.setAttribute('patternUnits', 'userSpaceOnUse'); 
    pattern.setAttribute('width', 500); 
    pattern.setAttribute('height', 500); 

     var image = document.createElementNS(svgNS, 'image'); 
     image.setAttribute('xlink:href', 'http://www.jampez.co.uk/sensoryuk/events/test.jpg'); 
     image.setAttribute('x', -100); 
     image.setAttribute('y', -100); 
     image.setAttribute('width', 500); 
     image.setAttribute('height', 500); 

    pattern.appendChild(image); 

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

    $('svg polygon').attr('fill', 'url(#' + id + ')'); 

    return defs.appendChild(pattern); 
} 

Answer 1

ので

image.setAttribute('xlink:href', 'http://www.jampez.co.uk/sensoryuk/events/test.jpg'); 

はする必要があります

image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://www.jampez.co.uk/sensoryuk/events/test.jpg');