没问题，我懂你的需求——你想让那段长文本在覆盖绿色小矩形的区域自动切换颜色，而在白色背景上保持原本的白色。这里有两种可行的方案，根据你的实际需求选就行：

方案1：纯SVG实现（无需JavaScript） #

这种方法适合文本位置固定，需要部分文本随背景变色的场景。我们用SVG的<clipPath>来拆分文本的显示区域，分别设置不同颜色：

<svg id="floor-plan" width="300" height="100">
  <!-- 白色背景矩形 -->
  <rect width="300" height="100" fill="white"/>
  <!-- 绿色小矩形（给它加个id方便复用） -->
  <rect id="green-rect" width="50" height="50" fill="green"/>
  
  <!-- 定义裁剪路径，放在defs里不显示 -->
  <defs>
    <!-- 裁剪出绿色矩形内部的区域 -->
    <clipPath id="clip-inside-green">
      <use href="#green-rect"/>
    </clipPath>
    <!-- 裁剪出绿色矩形外部的区域（大矩形减去绿色矩形） -->
    <clipPath id="clip-outside-green">
      <rect width="300" height="100"/>
      <use href="#green-rect" fill="white" />
    </clipPath>
  </defs>
  
  <!-- 绿色矩形内的文本（用黑色，和绿色背景对比清晰） -->
  <text x="10" y="10" dy="1.5em" fill="black" clip-path="url(#clip-inside-green)">
    dfdklsfjsadgkldsjfglkdsjfklögj
  </text>
  
  <!-- 绿色矩形外的文本（保持白色） -->
  <text x="10" y="10" dy="1.5em" fill="white" clip-path="url(#clip-outside-green)">
    dfdklsfjsadgkldsjfglkdsjfklögj
  </text>
</svg>

原理说明： #

• 我们创建了两个完全重合的文本元素，通过<clipPath>分别控制它们的显示区域：
  • clip-inside-green只保留文本在绿色矩形内的部分，设置为黑色（你可以换成任何和绿色对比明显的颜色）；
  • clip-outside-green只保留文本在白色背景上的部分，保持白色。
• 最终视觉上就是一段文本自动根据背景切换颜色，完全用SVG原生特性实现，不需要额外脚本。

方案2：JavaScript动态判断（适合文本位置可变） #

如果文本位置可能变化，或者你需要当整个文本都处于绿色矩形上方时才变色，可以用JS判断元素的边界框来动态修改颜色：

<svg id="floor-plan" width="300" height="100">
  <rect width="300" height="100" fill="white"/>
  <rect id="green-rect" width="50" height="50" fill="green"/>
  <text id="dynamic-text" x="10" y="10" dy="1.5em" fill="white">
    dfdklsfjsadgkldsjfglkdsjfklögj
  </text>
</svg>

<script>
const greenRect = document.getElementById('green-rect');
const textEl = document.getElementById('dynamic-text');

// 获取两个元素的边界框（基于SVG坐标系）
const rectBounds = greenRect.getBBox();
const textBounds = textEl.getBBox();

// 自定义判断逻辑：这里判断文本是否完全在绿色矩形内部（你可以根据需求调整）
const isTextOverGreen = (
  textBounds.x >= rectBounds.x &&
  textBounds.x + textBounds.width <= rectBounds.x + rectBounds.width &&
  textBounds.y >= rectBounds.y &&
  textBounds.y + textBounds.height <= rectBounds.y + rectBounds.height
);

// 根据判断结果切换颜色
if (isTextOverGreen) {
  textEl.setAttribute('fill', 'black');
} else {
  // 如果需要处理部分重叠的情况，也可以结合方案1的裁剪逻辑
  textEl.setAttribute('fill', 'white');
}
</script>

原理说明： #

• 用getBBox()获取元素的精确边界坐标，然后根据你定义的规则（比如文本是否完全覆盖绿色矩形）判断是否需要切换颜色；
• 如果文本位置会动态变化（比如拖拽、响应式调整），可以把判断逻辑放到事件监听里（比如resize或mousemove），实现实时更新。

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