SVG 图像中的可点击区域将指向另一个图像 src

Question

尝试使用 SVG 图像和可点击路径区域创建点击式冒险游戏。例如，如果您在走廊中，单击一扇门，img src 将更改为与该门对应的下一个房间。我可以使用 addEventListener“单击”并在单击特定区域时发出警报。我似乎不知道如何将 img src 更改为与该单击区域相对应的下一个房间。

 //example img
<svg>
 <image xlink:href="/pointAndClickImg/Main Hall.svg"/>
 <path id="mainhall-left-door"/>
 <path id="mainhall-right-door/>
</svg>

 //example js that works with clicking and alerting
let mainHallLeftDoor = document.getElementById("leftdoor")
let mainHallRightDoor = document.getElementById("rightdoor")


mainHallLeftDoor.addEventListener("click", function() {
    alert("left door clicked")
    
})

mainHallRightDoor.addEventListener("click", function() {
    alert("right door clicked")
})

Answer 1

图片是一个普通元素，你可以改变它的所有属性

mainHallLeftDoor.addEventListener("click", function() {
  alert("left door clicked")
  const img = document.querySelector('svg image')
  img.setAttribute('xlink:href', '/pointAndClickImg/room.svg')

})