问题描述
我正在将 foreignObject
添加到基于 svg
构建的图表中。我想把它放在 svg
的右上角,不管 svg
有多大/多小。所以我不想要一个硬编码的解决方案,我需要一个动态的解决方案。
在 width={'100%'} height={'100%'}
内设置 foreignObject
不可行,因为它会使图表的其余部分无法点击。
通过在 x
中手动设置 y
和 foreignObject
,我得到了一个非动态解决方案,但我需要一个动态解决方案。
我怎样才能做到这一点?
<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
解决方法
您的父组件 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}
>