改變的XLink：一個<image>的HREF在SVG，通過經典<a>鏈接

我在我的網頁有一個SVG（我用PHP）：改變的XLink：一個<image>的HREF在SVG，通過經典<a>鏈接

<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在鏈接上點擊變量時（並且沒有重新加載網頁），這樣的：

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

但我不知道什麼是js函數changexlinkhref(img){}的代碼（現在我不使用jquery在我的項目上）

謝謝！

來源

2016-06-12 jrm

你需要把img2.jpg參數放在單引號中然後像這樣的東西應該這樣做，只要你在頁面上只有一個圖像元素。

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

來源

2016-06-12 08:47:58

很好，謝謝！如果我有多個？ – jrm

你需要有一些機制來確定哪一個是你打算改變的。 –

除了羅伯特Longson答案，如果通過JS設置的值，而不是HTML5，你應該只設置href代替xlink:href用正確的命名空間。

應該設置這樣的：

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

來源

2017-05-20 16:30:08 BluE

改變的XLink：一個<image>的HREF在SVG，通過經典<a>鏈接

回答

相關問題