<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <rect id="red" width="100" height="100" fill="red"/>
        <rect id="green" width="100" height="100" fill="green"/>
    </defs>
    <use x="10" y="10" width="100" height="100" href="#red" />
    <use x="120" y="10" width="100" height="100" href="#red" />
    <use x="230" y="10" width="100" height="100" xmlns:href="#red" />
    <use x="340" y="10" width="100" height="100" xmlns:href="#red" />
    <script>
        var elements = document.querySelectorAll("use");
        elements[0].setAttribute("href", "#green");
        elements[1].href.baseVal = "#green";
        elements[2].setAttribute("href", "#green");
        elements[3].href.baseVal = "#green";
    </script>
</svg>