如何使用Javascript動態更改SVG中的圖像模式

Question

如何在使用Javascript的頁面上動態更改/添加圖像模式到現有SVG中？或任何圖書館。

這是我這麼遠..

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

您neeed使用setAttributeNS以設置在XLink命名空間的特徵，使

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');