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

Question

我的网页上有一个svg(我使用的是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>

我希望能够xlink:href在点击链接时更改变量(并且无需重新加载网页),例如:

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

但我不知道js函数的代码是什么changexlinkhref(img){}(现在我不在我的项目中使用jquery)

谢谢!

Answer 1

你需要将img2.jpg参数放在单引号中.如果你在页面上只有一个图像元素,那么这样的事情就应该这样做.

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