如何用文本输入动态高亮 SVG 地图中的房屋元素-js教程-PHP中文网

本文介绍如何通过 html 文本输入框获取房屋编号，利用 javascript 动态查找并高亮对应 svg 元素，替代冗余的按钮列表，提升急救人员在无序编号社区中快速定位房屋的效率。

本文介绍如何通过 html 文本输入框获取房屋编号，利用 javascript 动态查找并高亮对应 svg 元素，替代冗余的按钮列表，提升急救人员在无序编号社区中快速定位房屋的效率。

在实际应急响应场景中，面对不规则、无序排列的房屋编号（如 “1a”“22b”“32”），逐个点击按钮查找目标位置既低效又易出错。理想方案是：用户输入任意房屋编号（支持模糊匹配），系统自动高亮所有匹配的 SVG 元素。这无需为每个房屋编写独立函数，也不依赖固定 ID 格式，而是通过现代 Web 技术实现可扩展、易维护的交互逻辑。

核心思路是：让每个房屋 SVG 元素主动监听输入框变化，并根据当前输入值自主判断是否匹配自身编号。相比传统 getElementById() 需预先知道 ID 并手动调用，该方式更灵活、更健壮——尤其适合编号含字母、连字符或前导零（如 "01"）等非常规格式。

以下是一个完整、可直接运行的解决方案，基于原生 Web Components 实现：

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

<svg-house-map><input type="text" placeholder="请输入房屋编号（支持模糊匹配）"><br><svg viewbox="0 0 0 0" style="background:#f9f9f9; border:1px solid #ddd; width:100%; max-width:600px;"><style>
      .selected { fill: #28a745 !important; }
      circle { fill: #e0e0e0; stroke: #333; stroke-width: 1.2; transition: fill 0.2s ease; }
      text { font-family: Arial, sans-serif; font-size: 14px; dominant-baseline: middle; text-anchor: middle; }
    </style>
<!-- 房屋数据：格式为 "编号,CX,CY,RADIUS" --><house>01,380,400,40</house><house>02,380,60,40</house><house>03,80,240,40</house><house>04,430,210,40</house><house>05,110,60,40</house><house>06,230,130,40</house><house>07,130,370,40</house><house>08,280,280,40</house></svg></svg-house-map><script>
  customElements.define("svg-house-map", class extends HTMLElement {
    connectedCallback() {
      // 确保 SVG 内容已解析后再处理
      setTimeout(() => {
        const svg = this.querySelector("svg");
        const input = this.querySelector("input");
        const houses = Array.from(svg.querySelectorAll("house"));

        // 动态计算 viewBox 范围（含安全边距）
        const vbx = [], vby = [];

        houses.forEach(house => {
          const [nr, cx, cy, r = 40] = house.textContent.split(",").map(s => s.trim());
          const radius = Number(r);

          // 扩展 viewBox 边界（加半径+10px 边距）
          vbx.push(Number(cx) + radius + 10);
          vby.push(Number(cy) + radius + 10);

          // 构建 SVG 元素：圆圈 + 居中文本
          const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
          circle.setAttribute("cx", cx);
          circle.setAttribute("cy", cy);
          circle.setAttribute("r", radius);
          circle.setAttribute("class", "default");

          const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
          text.setAttribute("x", cx);
          text.setAttribute("y", cy);
          text.textContent = nr;

          // 插入到 DOM 并替换原始 <house> 标签
          house.replaceWith(circle, text);

          // 关键：为每个房屋绑定输入监听器（支持实时模糊匹配）
          input.addEventListener("input", () => {
            const query = input.value.trim();
            const isMatch = query && nr.toLowerCase().includes(query.toLowerCase());
            circle.classList.toggle("selected", isMatch);
          });
        });

        // 设置最终 viewBox（自动适配所有房屋坐标）
        if (vbx.length && vby.length) {
          svg.setAttribute("viewBox", `0 0 ${Math.max(...vbx)} ${Math.max(...vby)}`);
        }
      }, 0);
    }
  });
</script>

✅ 优势说明：