实现SVG文本触发图片弹窗：选用何种JS及实现方法

首先，原生JavaScript就完全能搞定这个需求，不需要引入额外框架（比如jQuery），轻量又高效。下面结合你的SVG代码，一步步讲清楚实现方法：

第一步：优化SVG文本的可交互性 #

你的SVG里有.label类的文本元素，先给它们加上点击提示样式，再用data-*属性绑定对应要弹窗的图片地址，方便后续JS读取：

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="540">
  <style type="text/css">
    .st0 { fill: none; stroke: #BF2236; stroke-width: 12.3807; stroke-linejoin: round; stroke-miterlimit: 3.994; }
    .st1 { fill: #FFFFFF; }
    .st2 { fill: #231F20; }
    .label { 
      font-family: PaddingtonPlain, "Trebuchet MS", sans-serif; 
      font-size: 25px; 
      fill: #0054A6; 
      cursor: pointer; /* 鼠标悬停显示手型，提示可点击 */
      user-select: none; /* 避免选中文本影响体验 */
    }
    .label:hover { fill: #F15A22; font-size: 30px; }
  </style>
  <!-- 给每个文本加data-img属性，存储对应图片路径 -->
  <text class="label" x="150" y="120" data-img="your-image-1.jpg">导航选项1</text>
  <text class="label" x="350" y="250" data-img="your-image-2.jpg">导航选项2</text>
  <!-- 其他导航文本同理 -->
</svg>

第二步：用原生JS实现弹窗逻辑 #

我们可以动态创建一个全屏弹窗容器，默认隐藏，点击文本时加载对应图片并显示弹窗，点击关闭按钮或弹窗背景时隐藏：

// 1. 创建弹窗容器
const imageModal = document.createElement('div');
imageModal.style.cssText = `
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
`;

// 2. 创建弹窗内的图片元素
const modalImage = document.createElement('img');
modalImage.style.cssText = `
  max-width: 85%;
  max-height: 85%;
  border-radius: 4px;
`;

// 3. 创建关闭按钮
const closeBtn = document.createElement('button');
closeBtn.textContent = '×';
closeBtn.style.cssText = `
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  background: transparent;
  border: none;
  cursor: pointer;
`;

// 4. 组装弹窗并添加到页面
imageModal.appendChild(modalImage);
imageModal.appendChild(closeBtn);
document.body.appendChild(imageModal);

// 5. 绑定点击事件
// 点击SVG文本显示对应图片弹窗
document.querySelectorAll('.label').forEach(label => {
  label.addEventListener('click', () => {
    const imgSrc = label.getAttribute('data-img');
    modalImage.src = imgSrc;
    imageModal.style.display = 'flex';
  });
});

// 关闭弹窗的通用函数
function closeModal() {
  imageModal.style.display = 'none';
  modalImage.src = ''; // 清空图片地址，避免缓存干扰
}

// 点击关闭按钮关闭弹窗
closeBtn.addEventListener('click', closeModal);

// 点击弹窗背景（非图片区域）关闭弹窗
imageModal.addEventListener('click', (e) => {
  if (e.target === imageModal) {
    closeModal();
  }
});

关键细节说明 #

• 为什么选原生JS？：你的需求是基础的点击交互+弹窗，原生JS足够灵活，不需要额外依赖，页面加载速度更快。
• data属性的优势：用data-img把文本和图片路径绑定，代码结构清晰，后期新增导航选项时，只需要给文本加对应属性即可，无需修改JS逻辑。
• 弹窗样式优化：用fixed定位让弹窗铺满屏幕，半透明背景突出图片，限制图片最大宽高避免超出屏幕，提升用户体验。

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