在单击时替换 SVG 图像

Replace an SVG image onClick

本文关键字：SVG 图像 替换 单击      更新时间：2023-09-26
<svg style="position: absolute;">
    <defs>
        <pattern id="image" width="1" height="1" viewBox="0 0 100 100">
            <image xlink:href='https://upload.wikimedia.org/wikipedia/commons/f/f8/Fulmer_Falls_Closeup_3000px.jpg' width="100" height="100" preserveAspectRatio="none"></image>
        </pattern>
    </defs>
</svg>

因此，在我的SVG中，我有一个href链接指向我在互联网上找到的随机图像。我正在尝试更改此链接，因此单击一个元素时它会更改。

简讯

var selectedEl = $('#myID li');    
selectedEl.on('click', function () {
    var mySVG = $('#image');
});

但是我不知道如何更新链接。我尝试使用attr进行更新，但无济于事。

谢谢:)

考虑到selectedEl有效，由于缺少 html 代码，下面应该可以解决问题。attr方法应更改任何给定的属性名称。

selectedEl.on('click', function() {
  var mySVG = $('#image image');
  $(mySVG).attr('xlink:href','the new URL here'); 
});
相关文章：