制作SVG字体的办法有很多,我这里选择了Adobe XD进行制作。
1.选择画布尺寸
2 输入文本 设置字体样式
3 设置画布背景
4 转换字体(物件)路径
5 设置组
复制SVG代码
6 放入到Html中
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<title>SVG文字动画</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="34.138" height="47.409" viewBox="0 0 34.138 47.409">
<path id="路径_1" data-name="路径 1"
d="M37.969-2.065a23.418,23.418,0,0,1-12.3,3.12q-9.624,0-15.535-6.262T4.219-21.445q0-11.118,6.372-17.864T27.6-46.055a23.673,23.673,0,0,1,10.459,2.2v7.383A18.324,18.324,0,0,0,27.334-39.99a14.49,14.49,0,0,0-11.316,4.944Q11.6-30.1,11.6-22.061q0,7.91,4.153,12.48t11.14,4.57A18.063,18.063,0,0,0,37.969-8.921Z"
transform="translate(-4.069 46.205)" fill="none" stroke="#fff" stroke-width="0.3" />
</svg>
</body>
</html>
效果图: