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

Posted 2023-02-22

【中文标题】通过经典的 <a> 链接更改 svg 中 <image> 的 xlink:href

【英文标题】：change the xlink:href of an <image> in a svg, through a classic <a> link

【发布时间】：2016-10-12 20:05:55

【问题描述】：

我的网页中有一个 SVG（我使用 php）：

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

我希望能够在单击链接时更改 xlink:href 变量（并且无需重新加载网页），例如：

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

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

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

谢谢！

【参考方案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);