KonvaJS zIndex问题：背景图覆盖前景多边形或加载时显示黑框

我太懂这种调层级调半天没效果的挫败感了！你想把欧洲PNG地图当背景，放在那些带mouseover/mouseout/mousedown事件的国家多边形后面，之前试了单独图层、设zIndex=-1都没用，大概率是没摸准你用的绘图库（不管是SVG、Konva还是其他）的层级渲染逻辑——很多时候单纯设zIndex不如调整渲染顺序靠谱，再加上背景图可能还会拦截鼠标事件，这俩问题凑一起就容易卡壳。

给你几个针对性的解决方案，分常见场景来说：

场景1：用SVG实现 #

SVG的层级完全由DOM元素的顺序决定：后面写的元素会自动覆盖前面的。所以根本不用纠结zIndex，直接把背景<image>标签放在所有多边形<path>的前面就行，再给背景图加个pointer-events: none，防止它挡住多边形的鼠标事件。

举个极简示例：

<svg width="800" height="600">
  <!-- 背景图放最前面，渲染在最底层 -->
  <image 
    x="0" y="0" 
    width="800" height="600" 
    href="europe-map.png" 
    style="pointer-events: none;"
  />
  <!-- 带交互的多边形放后面，自动在背景上方 -->
  <path 
    d="M100,200 L150,150 L200,200 Z" 
    fill="rgba(255, 99, 71, 0.6)"
    onmouseover="this.style.fill='rgba(255, 99, 71, 0.9)'"
    onmouseout="this.style.fill='rgba(255, 99, 71, 0.6)'"
    onmousedown="console.log('点击了多边形')"
  />
</svg>

场景2：用Canvas类库（比如Konva.js） #

这类库的Layer层级逻辑是：先添加到Stage的Layer会渲染在底层，后添加的在上层。所以你只需要先创建并添加背景Layer，再添加多边形所在的Layer，不用额外设zIndex也能实现层级效果。同样别忘了给背景图关闭指针事件，不然鼠标点不到多边形。

示例代码：

// 假设已经加载好欧洲地图图片对象 europeMapImg
const stage = new Konva.Stage({
  container: 'map-container',
  width: 800,
  height: 600
});

// 先创建背景Layer并添加到Stage（默认zIndex=0，底层）
const backgroundLayer = new Konva.Layer();
stage.add(backgroundLayer);

const backgroundImg = new Konva.Image({
  x: 0, y: 0,
  width: 800, height: 600,
  image: europeMapImg
});
backgroundImg.setAttr('pointer-events', 'none'); // 关闭指针事件
backgroundLayer.add(backgroundImg);
backgroundLayer.draw();

// 再创建多边形Layer并添加（默认zIndex=1，上层）
const polygonLayer = new Konva.Layer();
stage.add(polygonLayer);

// 添加带交互的多边形
const germanyPolygon = new Konva.Line({
  points: [300, 250, 350, 200, 400, 250, 350, 300],
  fill: 'rgba(30, 144, 255, 0.6)',
  closed: true,
  onmouseover: function() {
    this.fill('rgba(30, 144, 255, 0.9)');
    polygonLayer.draw();
  },
  onmouseout: function() {
    this.fill('rgba(30, 144, 255, 0.6)');
    polygonLayer.draw();
  },
  onmousedown: function() {
    console.log('点击了德国区域');
  }
});
polygonLayer.add(germanyPolygon);
polygonLayer.draw();

关键注意点 #

1. 优先调整渲染顺序：不管是SVG的DOM顺序还是Canvas库的Layer添加顺序，这是最稳定的层级控制方式，比zIndex靠谱得多——很多库的zIndex只是辅助，底层还是按渲染顺序来。
2. 必须关闭背景图的指针事件：如果背景图占满整个画布，它会默认拦截所有鼠标事件，导致多边形的交互失效，pointer-events: none就是让鼠标事件直接穿透到下面的元素。
3. 如果非要用zIndex：确保你设置的是同一层级容器内的zIndex（比如SVG的<g>分组内，或者Konva的同一个Stage下的Layer），设置后记得调用渲染刷新方法（比如Konva的layer.draw()）。

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