通过经典<a> link

时间:2016-06-12 08:35:00

标签: javascript php jquery dom svg

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!

3 个答案:

答案 0 :(得分:10)

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

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

答案 1 :(得分:2)

除了Robert Longson的回答,如果你通过js而不是html5设置值,你应该用正确的命名空间设置href而不是xlink:href

它应该像这样设置:

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

答案 2 :(得分:1)

xlink:href贬值了

这是现在有效的方法:

….setAttribute('href', url);

显然,带有双引号的"href"也可以使用。