菜单未在 svg 中完全呈现

Question

我正在尝试在 svg 中呈现下拉菜单，例如：

但是，当我点击它时，菜单底部被砍掉了：

我该如何解决这个问题？

<svg>
  <foreignObject x={0} y={0} width={"100%"} height={"100%"}>
    <Menu>
      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
        Actions
      </MenuButton>
      <MenuList>
        <MenuItem>Download</MenuItem>
        <MenuItem>Create a Copy</MenuItem>
        <MenuItem>Mark as Draft</MenuItem>
        <MenuItem>Delete</MenuItem>
        <MenuItem>Attend a Workshop</MenuItem>
      </MenuList>
    </Menu>
  </foreignObject>
</svg>

这是代码框：

https://codesandbox.io/s/chakra-button-forked-7ig5f?file=/src/App.js

Answer 1

您可以尝试为 SVG 元素添加高度或视图框属性。由于这个原因，SVG 很可能被切断了。

<svg viewBox="0 0 500 500">

或

<svg height="500px">

菜单未在 svg 中完全呈现

Menu not rendering fully in svg

reactjs

svg

chakra-ui

foreignobject