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

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

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

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

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

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

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

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

2、导出文件为SVG文件

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

注意关键来了！我们需要生成的是path路径，而不是css样式，在弹出的选项框中，选择轮廓。

点击确定就会生成一个svg文件。

3、复制路径代码到项目中

接下来打开该svg文件，可以复制出如下代码，到你的项目中

 <path d="M43.85,55.15,46.3,37.3H22.68L14.11,61.85H.43L14.18,22.32H4.68l.94-6.84H28.87l.36-2.74L26.93,10H43.34l-.79,5.47H65.81l-.94,6.84h-37l-2.8,8.14H61L57.24,57.1a5.66,5.66,0,0,1-5.62,4.75H37.37Z" transform="translate(-0.43 -10.01)" /><path class="cls-1" d="M74.81,14.54l-1.3-2.08H96L89.5,59H68.62ZM83,52.13l1.87-13.68H79.2L77.33,52.13ZM80.21,31.61H85.9L87.62,19.3H81.94Zm47.66,10.15-2.73,19.37H91.73l2.73-19.37Zm-6.26-15.48L120,16.13h-9.64l-5.69,10.22H96.48l7.78-13.61-2.09-2.52h25L130,26.28ZM128.16,28l-.86,6.33L122,41.11H113l5.33-7H96.48L97.34,28ZM116.28,54.86l.86-6.26H103.68l-.86,6.26ZM117.72,19l.22,7.63h-7.2L110.45,19Z" />

接下来的过程中，就不叙述了，就是一些实现遮罩动画的方法，当然如果你感兴趣的话，可以看下这个人的文档，很不错哦！

https://www.sumaarts.com/share/556.html

，希望这个过程能带给你启发，同时这个方法也能优化你的静态资源大小，能用代码实现的动画，总比庞大的gif动画好吧！