javascript - 通过经典 链接更改 xlink :href of an in a svg,

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>

但是，我想知道 JavaScript 函数 changexlinkhref(img){} 的代码是什么？

目前，我没有在我的项目中使用 JQuery。

谢谢!

Answer 1

您需要将 img2.jpg 参数放在单引号中，如果您在页面上只有一个图像元素，那么应该这样做。

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

现在大多数浏览器都支持 null 命名空间中的 href 以及导致更简单

function changexlinkhref(value) {
  document.querySelector("image").setAttribute('href', value);
}

虽然据我所知，Inkscape和Batik目前还不支持。