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

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

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

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

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

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

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

这里我就输入一个大标题,实现自定义字体。
react svg 通过路径实现非系统的自定义字体的显示_第1张图片

2、导出文件为SVG文件

点击菜单栏的文件→导出→导出为…,出现下面界面,然后导出对应文件
react svg 通过路径实现非系统的自定义字体的显示_第2张图片
注意关键来了!我们需要生成的是path路径,而不是css样式,在弹出的选项框中,选择轮廓。
react svg 通过路径实现非系统的自定义字体的显示_第3张图片
点击确定就会生成一个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动画好吧!

你可能感兴趣的:(svg,svg,图标设计)