前端之家

  1. 首页
  2. 问答

将一个foreignObject 定位到svg 的右上角

• 问答

我正在将 foreignObject 添加到基于 svg 构建的图表中。我想把它放在 svg 的右上角，不管 svg 有多大/多小。所以我不想要一个硬编码的解决方案，我需要一个动态的解决方案。

在 width={'100%'} height={'100%'} 内设置 foreignObject 不可行，因为它会使图表的其余部分无法点击。

通过在 x 中手动设置 y 和 foreignObject，我得到了一个非动态解决方案，但我需要一个动态解决方案。

我怎样才能做到这一点？

将一个foreignObject 定位到svg 的右上角

<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

wyd379299458 回答：将一个foreignObject 定位到svg 的右上角

您的父组件 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}
      >
foreignobjectjavascriptreactjssvg
本文链接：https://www.f2er.com/28034.html

大家都在问