reactjssvgchakra-uiforeignobject

Menu not rendering fully in svg

I'm trying to render a drop-down menu inside an svg, such as:

enter image description here

However, when I click on it, the bottom of the menu is chopped off:

enter image description here

How can I fix this?

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

Here's the codesandbox:

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

Solution

  • You can try adding height or view box attributes to the SVG element. The SVG is most likely being cut off for this reason.

    <svg viewBox="0 0 500 500">

    or

    <svg height="500px">