jquery dynamically change svg image xlink:href

Question

I'm trying to dynamically change the polygon's fill with an image not a fill color. To do so, I found a way to change the fill to an image, but I'm unable to dynamically change the xlink:href URL to a random url. Any thoughts? Thanks for your help!

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="320px" height="480px" viewBox="0 0 320 480" enable-background="new 0 0 320 480" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<pattern patternUnits="userSpaceOnUse" id="pat1" x="10" y="10" 
 width="425" height="319">
    <image id="background" width="100%" height="100%" 
     xlink:href="http://www.w3.org/1999/xlink" />
</pattern>
<g id="Layer_1">
    <polygon class="background"  fill="url(#pat1)" points="265.188,329.922 160.198,358 55.208,329.922 55.208,120.868 265.188,120.868  "/>

</g>
<g id="Layer_2">
    <g id="brand_mark_1_">
        <g>
            <rect x="265.188" y="120.868" fill="#FFFFFF" width="23.812" height="44.378"/>
            <g>
                <path fill="#020304" d="M275.372,149.035c0,0.949,0.77,1.72,1.721,1.72c0.949,0,1.72-0.771,1.72-1.72      c0-0.023-0.003-0.044-0.004-0.066v-16.261c0.004-0.043,0.007-0.088,0.007-0.134c0-0.95-0.77-1.72-1.719-1.72      c-0.942,0-1.707,0.757-1.72,1.695h-0.005v16.461h0.001C275.374,149.017,275.372,149.025,275.372,149.035z"/>
                <circle fill="#F5170D" cx="277.093" cy="153.541" r="1.72"/>
            </g>
        </g>
    </g>
</g>
</svg>


 $(document).ready(function() {
                var randomColor = Math.floor(Math.random()*16777215).toString(16),
                    randomNumber = Math.floor((Math.random()*855)+48),
                    backg = $('#background');
                    $("body").css("background-color", randomColor);
                    backg.attr("http://www.w3.org/1999/xlink", "xlink:href","url(http://blob.apliiq.com/sitestorage/fabric/" + randomNumber + ".png)");
                    $('a#cta').attr("href", "/designyourown/?fabricID=" + randomNumber );               
            });

Answer 1

Works fine if you rectify the backg.attr function attributes.

$(document).ready(function () {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16),
        randomNumber = Math.floor((Math.random() * 855) + 48),
        backg = $('#background');
    $("body").css("background-color", '#' + randomColor);
    backg.attr("xlink:href", "http://blob.apliiq.com/sitestorage/fabric/" + randomNumber + ".png");
    $('a#cta').attr("href", "/designyourown/?fabricID=" + randomNumber);
});

JSFiddle Link: http://jsfiddle.net/arpitworld/jhetx/

Answer 2

I was trying to do this in JavaScript (without JQuery), but it was not working. For anyone who stumbles upon this in my situation, the trick was to call the setAttributeNS method and specify the xlink namespace for the href attribute. For example:

document.getElementById('background').setAttributeNS(
    'http://www.w3.org/1999/xlink', 
    'xlink:href', 
    '<URL goes here>');

Answer 3

after hours of massaging I finally got it to work by keeping the url("") out of the xlink:href="" ugh!

$(document).ready(function() {
            var randomNumber = Math.floor((Math.random()*855)+48);
                $('#background').attr('xlink:href',"http://blob.apliiq.com/sitestorage/cropped-fabrics/" + randomNumber + "_573_465.jpg");              
        });