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

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!

2个回答



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

  function changexlinkhref(value){
document.querySelector(“image”)。setAttributeNS('http://www.w3.org/1999/ xlink','xlink:href',value);
}
</ code> </ pre>
</ div>

展开原文

原文

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);
}

doupin5667
doupin5667 你需要有一些机制来确定哪一个是你打算改变的那个。
4 年多之前 回复
dongyan3018
dongyan3018 十分感谢! 如果我有多个<image>?
4 年多之前 回复



除了Robert Longson的回答,如果你通过js而不是html5设置值,你应该只设置 href </ code >而不是带有正确名称空间的 xlink:href </ code>。</ p>

它应该像这样设置:</ p>

   setAttributeNS('http://www.w3.org/1999/xlink','href',url); 
</ code> </ pre>
</ div>

展开原文

原文

In addition to Robert Longson answer, if you set the value through js and not html5 you should just set href instead of xlink:href with the correct namespace.

It should be set like this:

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐