2012-11-14 19 views
5

Jak mogę dynamicznie zmieniać/dodawać wzorzec obrazu do istniejącego pliku SVG na mojej stronie przy użyciu Javascript? Lub dowolnej biblioteki.Jak dynamicznie zmieniać wzorzec obrazu w SVG przy użyciu Javascriptu

To, co mam tak daleko ..

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

Odpowiedz

6

Ty neeed używać setAttributeNS ustawić atrybuty, które są w przestrzeni nazw xlink tak

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

powinny być

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

Dziękujemy! To działa :) –

+0

Dzięki za banda. Szukaliśmy tego. – susrut316

+0

@DanielHill jampez.co.uk była starą stroną portfolio. Skąd przyszedł ten kod? – jampez77

Powiązane problemy