通过经典<a>链接更改svg中<image>的xlink：href

I have a svg in my webpage (I use php):

<svg width="500px" height="500px" xml:lang="fr"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="500" height="500" xlink:href="img1.jpg" opacity="0.35" />
</svg>

I would like to be able to change the xlink:href variable when clicking on a link (and without reload the webpage), something like:

<a href=#" onclick="changexlinkhref(img2.jpg)">change with img2</a>

But I don't know what would be the code of the js function changexlinkhref(img){} (and for now I don't use jquery on my project)

Thanks!

You'll need to put the img2.jpg argument in single quotes Then something like this should do it provided you only have one image element on the page.

function changexlinkhref(value) {
  document.querySelector("image").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', value);
}

In addition to Robert Longson answer, if you set the value through js and not html5 you should just set href instead of xlink:href with the correct namespace.

It should be set like this:

setAttributeNS('http://www.w3.org/1999/xlink', 'href', url);