如何在SVG点击冒险游戏中实现点击路径切换图片src？

要实现点击SVG里的路径切换场景图片，核心是获取SVG中的元素并修改其图片引用属性，以下是具体步骤和修正后的代码：

步骤说明 #

1. 给SVG内的标签添加唯一ID，方便JavaScript获取元素
2. 修正SVG中路径的ID拼写错误（确保引号闭合、ID名称准确）
3. 在点击事件回调中，修改的xlink:href（或href）属性，替换为目标场景的图片路径

完整示例代码 #

SVG部分（修正错误后） #

<svg width="800" height="600">
  <!-- 给场景图片添加id，方便JS操作 -->
  <image id="scene-image" xlink:href="/pointAndClickImg/Main Hall.svg" width="100%" height="100%"/>
  <!-- 修正路径ID的引号闭合问题，确保ID唯一且准确 -->
  <path id="mainhall-left-door" d="M100,100 L150,100 L150,300 L100,300 Z" fill="transparent" stroke="none"/>
  <path id="mainhall-right-door" d="M650,100 L700,100 L700,300 L650,300 Z" fill="transparent" stroke="none"/>
</svg>

注：路径的d属性需要根据你实际的门位置绘制，fill="transparent"保证路径不可见但可点击，stroke="none"避免显示边框

JavaScript部分（实现图片切换） #

// 获取场景图片元素和两个门的路径元素
const sceneImage = document.getElementById('scene-image');
const leftDoor = document.getElementById('mainhall-left-door');
const rightDoor = document.getElementById('mainhall-right-door');

// 左门点击事件：切换到左侧房间图片
leftDoor.addEventListener('click', function() {
  // 修改图片引用，替换为左侧房间的SVG路径
  sceneImage.setAttribute('xlink:href', '/pointAndClickImg/Left Room.svg');
  // 如果是现代浏览器，也可以直接用href属性：sceneImage.setAttribute('href', 'xxx');
});

// 右门点击事件：切换到右侧房间图片
rightDoor.addEventListener('click', function() {
  sceneImage.setAttribute('xlink:href', '/pointAndClickImg/Right Room.svg');
});

关键注意事项 #

• 确保SVG中的width和height设置合理，避免图片变形
• 路径的fill必须设置为非none（可以是透明），否则无法触发点击事件
• 若使用现代浏览器，推荐直接使用href属性替代xlink:href（SVG2标准）

内容的提问来源于stack exchange，提问作者Nathaniel