將一個foreignObject 定位到svg 的右上角

Question

我正在向基於svg構建的圖表添加一個foreignObject 。 我希望把它放在的右上角svg ，不管是多么大/小svg是。 所以我不想要一個硬編碼的解決方案，我需要一個動態的解決方案。

在foreignObject內部設置width={'100%'} height={'100%'}是行不通的，因為它使圖表的其余部分無法點擊。

我通過在foreignObject手動設置x和y得到了一個非動態解決方案，但我需要一個動態解決方案。

我怎樣才能做到這一點？

<g>
    <foreignObject //x={0} y={0} 
    width={'1'} height={'1'} style={{overflow: 'visible'}} x={50} y={50}>
     <Menu>
        <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", position: "absolute", right: 0 }}>
          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>

代碼沙盒：

https://codesandbox.io/s/floral-water-v11gx?file=/src/BasicLineSeries.tsx

Answer 1

您的父組件BasicLineSeries已經知道width ，因此您可以將其傳遞給生成foreignObject的組件，如下所示：

       <ChartCanvas
          height={height}
          ratio={ratio}
          width={width}
          ...
        >
          <Chart id={1} yExtents={this.yExtents}>
            <LineSeries yAccessor={this.yAccessor} strokeWidth={3} />
            <XAxis />
            <YAxis />
          </Chart>
          <TestMenu width={width} />
        </ChartCanvas>

function TestMenu({width}) {
  return (
    <g className="react-financial-charts-enable-interaction">
      <foreignObject
        width={"1"}
        height={"1"}
        style={{ overflow: "visible" }}
        x={width}
        y={50}
      >