问题描述
我正在尝试在 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
解决方法
您可以尝试向 SVG 元素添加高度或视图框属性。由于这个原因,SVG 很可能被切断了。
<svg viewBox="0 0 500 500">
或
<svg height="500px">