当前位置：首页 > news >正文

使用Adobe XD进行制作SVG字体

news 2024/9/24 14:14:39

制作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>

效果图：