如何动态将foreignObject定位到SVG图表画布右上角且无需硬编码坐标

解决方案 #

你可以通过以下两种方案实现动态适配的右上角定位，同时避免遮挡图表区域的点击事件：

方案1：纯CSS无硬编码方案（推荐）

利用SVG的百分比坐标和CSS偏移实现自动定位，无需JS计算，完全适配任意SVG尺寸：

1. 把foreignObject的x属性设为100%（对应SVG画布的最右侧边界），y属性设为0（对应SVG画布的最顶部边界），宽高都设为0，保留overflow: visible属性。由于foreignObject本身尺寸为0，完全不会遮挡下层图表的点击事件。
2. 给foreignObject内部的菜单根元素添加transform: translateX(-100%)样式，让菜单整体向左偏移自身宽度，刚好贴靠在SVG右上角。
   修改后的代码示例：

<g>
  <foreignObject 
    x="100%" 
    y="0" 
    width="0" 
    height="0" 
    style={{overflow: 'visible'}}
  >
    <Menu style={{transform: 'translateX(-100%)'}}>
      <MenuButton 
        as={Button} 
        rightIcon={<ChevronDownIcon />}         
        transition="all 0.001s"
        borderRadius="md"
        borderWidth="0px"
        _hover={{ bg: "gray.400" }}
        _expanded={{ bg: "blue.400" }}
        _focus={{ boxShadow: "none" }}
        style={{ marginTop: "1px" }}
      >
        Actions
      </MenuButton>
      <Portal>
        <MenuList zIndex={10}>
          <MenuItem>Download</MenuItem>
          <MenuItem>Create a Copy</MenuItem>
          <MenuItem>Mark as Draft</MenuItem>
          <MenuItem>Delete</MenuItem>
          <MenuItem>Attend a Workshop</MenuItem>
        </MenuList>
      </Portal>
    </Menu>
  </foreignObject>
</g>

方案2：JS动态计算（适配带viewBox缩放/复杂变换的场景）

如果你的SVG设置了非默认的viewBox，或者存在缩放、平移等变换，可通过JS实时计算位置：

1. 给SVG元素绑定ref，在组件挂载、窗口resize时触发位置更新
2. 获取SVG的实际渲染宽高，减去菜单的自身宽度和你需要的边距，动态赋值给foreignObject的x属性即可

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