自学内容网 自学内容网

使用Adobe XD进行制作SVG字体

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

效果图:


原文地址:https://blog.csdn.net/qq_37550440/article/details/142486275

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!