如何解决菜单未在 svg 中完全呈现
我正在尝试在 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">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。