将 foreignObject 定位到 svg 的右上角

Question

我正在向基于 svg 构建的图表添加 foreignObject。我想把它放在 svg 的右上角，不管 svg 是怎样的 big/small。所以我不想要一个硬编码的解决方案，我需要一个动态的解决方案。

在 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>

Codesandbox:

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}
      >

将 foreignObject 定位到 svg 的右上角

Position a foreignObject to the top-right of an svg

javascript

svg

reactjs

foreignobject