更改< image>的xlink:href在svg中,通过经典的< a>关联 [英] change the xlink:href of an <image> in a svg, through a classic <a> link
本文介绍了更改< image>的xlink:href在svg中,通过经典的< a>关联的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的网页上有一个svg(我使用php):
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>
我希望能够在单击链接时更改xlink:href
变量(并且无需重新加载网页),例如:
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>
但是我不知道js函数changexlinkhref(img){}
的代码是什么(目前我不在项目中使用jquery)
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)
谢谢!
推荐答案
您需要将img2.jpg参数放在单引号中.然后,如果您在页面上只有一个图像元素,则应该执行类似的操作.
You'll need to put the img2.jpg argument in single quotes Then something like this should do it provided you only have one image element on the page.
function changexlinkhref(value) {
document.querySelector("image").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', value);
}
这篇关于更改< image>的xlink:href在svg中,通过经典的< a>关联的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文