Cách tự động thay đổi mẫu hình ảnh trong SVG bằng cách sử dụng Javascript

Question

Làm cách nào để tự động thay đổi/thêm mẫu hình ảnh vào SVG hiện có trên trang của tôi bằng Javascript? Hoặc bất kỳ thư viện nào.

Đây là những gì tôi đã có cho đến nay ..

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

Bạn neeed sử dụng setAttributeNS để thiết lập các thuộc tính có trong không gian tên XLink nên

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

nên

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