如何通过svg-pan-zoom实现SVG地图上固定位置且非缩放的标记点？

核心思路 #

把SVG地图和标记点拆分成两个独立的控制层级：地图层交给svgPanZoom处理缩放平移，标记点层脱离该工具的控制范围，通过监听地图的缩放平移事件，实时计算并同步标记点的位置，同时保持标记点的尺寸恒定。

具体实现步骤 #

1. 结构拆分

   • 方案一：创建两个重叠的SVG容器，一个（比如#map-svg）专门承载地图，另一个（比如#markers-svg）放置所有标记点，用CSS绝对定位让两者宽高、位置完全一致。
   • 方案二：在同一个SVG内，将地图放在单独组<g id="map-group">，标记点放在另一个组<g id="markers-group">，后续仅对map-group调用svgPanZoom。

2. 初始化svgPanZoom
   只对地图容器/组初始化工具，避免影响标记点：

   const panZoom = svgPanZoom('#map-svg', {
     zoomEnabled: true,
     panEnabled: true,
     controlIconsEnabled: true
     // 其他配置按需调整
   });
   

3. 同步标记点位置
   监听svgPanZoom的zoom和pan事件，根据当前的缩放比例和平移偏移量，反向计算标记点的位置，确保其相对地图的位置不变：

   // 预存每个标记点的原始坐标（基于地图初始坐标系）
   const markers = document.querySelectorAll('#markers-svg .marker');
   const markerData = Array.from(markers).map(marker => ({
     x: parseFloat(marker.getAttribute('cx')),
     y: parseFloat(marker.getAttribute('cy')),
     elem: marker
   }));
   
   // 绑定事件监听
   panZoom.on('zoom', updateMarkerPos);
   panZoom.on('pan', updateMarkerPos);
   
   // 更新标记点位置的核心函数
   function updateMarkerPos() {
     const { zoom, pan } = panZoom.getState();
     markerData.forEach(data => {
       const newX = (data.x * zoom) + pan.x;
       const newY = (data.y * zoom) + pan.y;
       data.elem.setAttribute('cx', newX);
       data.elem.setAttribute('cy', newY);
     });
   }
   
   // 初始化时执行一次，确保位置正确
   updateMarkerPos();
   

4. 固定标记点尺寸
   标记点的尺寸（如圆形的r、矩形的width/height）直接设置固定像素值，比如<circle class="marker" cx="100" cy="200" r="5" fill="red" />，避免使用相对单位，确保缩放时大小不变。

高效替代方案：组级反向变换 #

如果使用同一SVG内的两组结构，可以直接对标记点组应用反向CSS变换，抵消地图的缩放效果，无需逐个更新标记点坐标：

panZoom.on('zoom', () => {
  const { zoom, pan } = panZoom.getState();
  const markerGroup = document.getElementById('markers-group');
  markerGroup.setAttribute('transform', `scale(${1/zoom}) translate(${-pan.x/zoom}, ${-pan.y/zoom})`);
});

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