react svg 通过路径实现非系统的自定义字体的显示

在给前端界面做文字遮罩动画时，考虑到兼容性，我采用了svg的方法，而不是css的方法。总体来说效果还是不错的，如下所示

但是奇怪的是，非系统自定义字体在组件刚创建的时候总是不显示，甚至一片空白，只有在调试页面中，更改字体才会显示上面的效果。

起初查了很多关于svg自定义字体的解决方法，发现不奏效，所以我采用了另一种方法，通过path路径的方法。

但是上面这么复杂的路径怎么解决呢？

通过Adobe Inlustrator，它是做矢量图形的好软件，同时也能生成svg文件，这个功能拓宽了我前端开发的设计。

1、做你想要生成的矢量图像

这里我就输入一个大标题，实现自定义字体。

2、导出文件为SVG文件

点击菜单栏的文件→导出→导出为…，出现下面界面，然后导出对应文件

注意关键来了！我们需要生成的是path路径，而不是css样式