web-dev-qa-db-ja.com

古典的な<a>リンクを介して、svg内の<image>のxlink：hrefを変更します

私のウェブページに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>
_

リンクをクリックしたとき（およびWebページをリロードせずに）に_xlink:href_変数を変更できるようにしたいと思います。

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

しかし、js関数changexlinkhref(img){}のコードがどうなるかわかりません（そして今のところ、プロジェクトでjqueryを使用していません）

ありがとう！

javascriptphpjquerydomsvg
9
jrm

Img2.jpg引数を一重引用符で囲む必要があります。ページに画像要素が1つしかない場合は、このような方法で実行できます。

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

Robert Longsonの回答に加えて、html5ではなくjsを介して値を設定する場合は、正しい名前空間でxlink:hrefの代わりにhrefを設定する必要があります。

次のように設定する必要があります。

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

xlink:href減価償却されました

これが現在機能しているものです。

….setAttribute('href', url);

明らかに、"href"二重引用符付きでも機能します。

0
Serge Stroobandt