描述的bug
SVG图像在使用Canvas选项卡渲染后，在Docs选项卡上无法显示线性渐变。

要重现

1. 克隆仓库 https://github.com/pahan35/storybook-repro 。
2. 切换到 bug/not-filled-with-linear-gradient 分支。
3. 启动storybook。
4. 转到带有bug的故事 http://localhost:6006/?path=/docs/icons-with-gradient--default 。
5. 切换到Canvas选项卡并返回。

预期结果是什么？
我希望看到一个带有渐变背景的矩形，就像最初打开时一样。

发生了什么？
我没有看到任何渐变。

系统信息
环境信息：
系统：
操作系统：macOS 11.6
CPU:(12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
二进制文件：
Node: 14.17.6 - /usr/local/opt/node@14/bin/node
Yarn: 3.0.2 - /usr/local/bin/yarn
npm: 6.14.15 - /usr/local/opt/node@14/bin/npm
浏览器：
Chrome: 94.0.4606.81
Safari: 15.0
npm包：
@storybook/addon-actions: ^6.4.0-beta.19 => 6.4.0-beta.19
@storybook/addon-docs: ^6.4.0-beta.19 => 6.4.0-beta.19
@storybook/addon-essentials: ^6.4.0-beta.19 => 6.4.0-beta.19
@storybook/addon-links: ^6.4.0-beta.19 => 6.4.0-beta.19
@storybook/react: ^6.4.0-beta.19 => 6.4.0-beta.19

附加上下文
我正在寻找原因，发现这是因为id重叠，这是因为我们将Canvas标记保留在DOM中，但只是用 hidden=true 将canvas容器隐藏起来。如果我们从DOM中删除canvas标记或从canvas容器中删除 hidden=true ,我们可以看到线性渐变背景再次出现。