菜单未在 svg 中完全呈现答案

【问题标题】：Menu not rendering fully in svg菜单未在 svg 中完全呈现
【发布时间】：2021-10-01 16:21:30
【问题描述】：

我正在尝试在 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

【问题讨论】：

标签： reactjs svg chakra-ui foreignobject

【解决方案1】：

您可以尝试向 SVG 元素添加高度或视图框属性。 SVG 很可能因此被切断。

<svg viewBox="0 0 500 500">

或

<svg height="500px">

【讨论】：