如何在任意尺寸div上构建SVG覆盖层以实现四边拖放目标？

不用嵌套SVG，直接通过单个SVG结合**动态计算的路径（path）**就能实现需求，完美解决重叠和收缩问题，同时支持拖放事件与样式定制。

核心逻辑 #

根据目标div的宽（w）、高（h）比例，自动生成四个互不重叠的区域：

• 正方形（w = h）：四边均为三角形，顶点指向中心
• 宽 > 高：上下为梯形，左右为三角形（左右三角形顶点在垂直中线两端）
• 高 > 宽：上下为三角形，左右为梯形（上下三角形顶点在水平中线两端）

每个区域用独立的<path>元素绘制，方便绑定事件和设置样式。

代码实现 #

HTML结构 #

<div class="drop-container">
  <svg class="drop-overlay" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<!-- 示例拖放元素 -->
<div class="draggable" draggable="true">拖我试试</div>

CSS样式 #

.drop-container {
  position: relative;
  width: 400px; /* 可任意设置，或通过JS动态获取 */
  height: 200px;
  border: 1px solid #ccc;
  margin: 20px;
}

.drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 让底层内容可点击，仅path响应事件 */
}

.drop-overlay path {
  pointer-events: all; /* 单独开启path的事件响应 */
  fill: rgba(0, 122, 255, 0.2);
  transition: fill 0.2s;
}

.drop-overlay path:hover {
  fill: rgba(0, 122, 255, 0.4);
}

.drop-overlay path.active {
  fill: rgba(0, 122, 255, 0.6);
}

.draggable {
  padding: 10px;
  background: #eee;
  cursor: grab;
  display: inline-block;
}

JavaScript逻辑 #

const container = document.querySelector('.drop-container');
const svg = document.querySelector('.drop-overlay');

// 生成拖放区域路径
function generateDropRegions() {
  const w = container.offsetWidth;
  const h = container.offsetHeight;
  const cx = w / 2;
  const cy = h / 2;

  // 清空旧路径
  svg.innerHTML = '';
  // 设置viewBox，确保路径坐标与容器尺寸匹配
  svg.setAttribute('viewBox', `0 0 ${w} ${h}`);

  let paths = [];

  if (w === h) {
    // 正方形：四个三角形
    paths = [
      { id: 'top', d: `M0,0 L${w},0 L${cx},${cy} Z` },
      { id: 'right', d: `M${w},0 L${w},${h} L${cx},${cy} Z` },
      { id: 'bottom', d: `M0,${h} L${w},${h} L${cx},${cy} Z` },
      { id: 'left', d: `M0,0 L0,${h} L${cx},${cy} Z` }
    ];
  } else if (w > h) {
    // 宽大于高：上下梯形，左右三角形
    paths = [
      { id: 'top', d: `M0,0 L${w},0 L${w},${cy} L0,${cy} Z` },
      { id: 'right', d: `M${w},0 L${w},${h} L${cx},${cy} Z` },
      { id: 'bottom', d: `M0,${h} L${w},${h} L${w},${cy} L0,${cy} Z` },
      { id: 'left', d: `M0,0 L0,${h} L${cx},${cy} Z` }
    ];
  } else {
    // 高大于宽：上下三角形，左右梯形
    paths = [
      { id: 'top', d: `M0,0 L${w},0 L${cx},${cy} Z` },
      { id: 'right', d: `M${w},0 L${w},${h} L${cx},${cy} L${cx},0 Z` },
      { id: 'bottom', d: `M0,${h} L${w},${h} L${cx},${cy} Z` },
      { id: 'left', d: `M0,0 L0,${h} L${cx},${cy} L${cx},0 Z` }
    ];
  }

  // 创建path元素并绑定拖放事件
  paths.forEach(({ id, d }) => {
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('id', id);
    path.setAttribute('d', d);

    // 拖放事件处理
    path.addEventListener('dragenter', (e) => {
      e.preventDefault();
      path.classList.add('active');
    });

    path.addEventListener('dragover', (e) => {
      e.preventDefault();
    });

    path.addEventListener('dragleave', () => {
      path.classList.remove('active');
    });

    path.addEventListener('drop', (e) => {
      e.preventDefault();
      path.classList.remove('active');
      console.log(`拖放到了${id}区域`);
      // 这里添加你的拖放逻辑，比如放置元素到对应边
    });

    svg.appendChild(path);
  });
}

// 初始化窗口大小变化时重新生成区域
window.addEventListener('resize', generateDropRegions);
generateDropRegions();

// 拖放元素的dragstart事件
document.querySelector('.draggable').addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', 'dragged-item');
});

关键说明 #

1. viewBox设置：确保SVG的坐标系统与容器完全匹配，路径不会因为容器尺寸变化而变形
2. pointer-events控制：SVG容器设置pointer-events: none，仅path开启事件，避免遮挡底层内容
3. 动态路径计算：通过容器宽高的中线（cx, cy）作为分割点，确保区域无重叠，完全覆盖容器
4. 事件绑定：每个path独立绑定拖放事件，可根据id区分拖放目标，方便后续逻辑处理

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