【问题标题】：change the xlink:href of an <image> in a svg, through a classic <a> link通过经典的 <a> 链接更改 svg 中 <image> 的 xlink:href
【发布时间】：2016-10-12 20:05:55
【问题描述】：

我的网页中有一个 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。

谢谢！

【问题讨论】：

标签： javascript php jquery dom svg

【解决方案1】：

`xlink:href` 被贬值了

这个 JavaScript 方法现在有效：

….setAttribute('href', url);

显然，带有双引号的"href" 也可以。

【讨论】：

【解决方案2】：

您需要将 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 还不支持它。

【讨论】：

【解决方案3】：

除了 Robert Longson 的回答之外，如果您通过 js 而不是 html5 设置值，您应该使用正确的命名空间设置 href 而不是 xlink:href。

应该这样设置：

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

【讨论】：

xlink:href 被贬值了

`xlink:href` 被贬值了