【bugfix】如何解决svg到线上显示空白或者svg的viewBox为空

thinkasany

于 2024-04-01 10:27:19 发布

阅读量844

点赞数 4

分类专栏： bugfix 文章标签： babel svgo

本文链接：https://blog.csdn.net/daddykei/article/details/137223251

版权

bugfix 专栏收录该内容

3 篇文章

订阅专栏

文章讲述了svgo的默认机制会删除viewbox以压缩SVG，但可通过更改Babel配置解决。具体提到在AntDesignWeb3项目中，通过添加特定的Babel插件如`preset-default`和禁用`removeViewBox`来保持viewbox。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

svgo的默认机制是当width和height和viewbox一样会删除viewbox，这都是为了svg的压缩做的，详情可以看issue中的讨论，我们可以通过更改babel的配置来解决
https://github.com/svg/svgo/issues/1128
https://github.com/ant-design/ant-design-web3/pull/742/files

 extraBabelPlugins: [
    [
      'inline-react-svg',
      {
        svgo: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false,
                },
              },
            },
            'removeDimensions',
            'convertStyleToAttrs',
          ],
        },
      },
    ],
    'react-inline-svg-unique-id',
  ],