TypingSVG：为 README 与网页生成多行客製化的打字 SVG 动画

发现频道
1

软件名称

TypingSVG

项目介绍

这是一个免费开源的 SVG 生成工具软件，用于生成客製化的打字 SVG 动画

推荐类型

【开发者自荐】

功能介绍

  • 支持多行、换行与多個空格。
  • 每行可单独设置字体 (支持所有 Google Fonts 的字体) / 字号 / 颜色 / 字距 / 速度 / 粗细…。
  • 多种删除行为（stay / backspace / clear）与光标样式（straight / underline / block / blank 等）。
  • 服务器端生成 SVG 并内联字体，无需客户端加载字体或 JS。
  • 提供在线预览 + API（可生成可直接嵌入的 URL 或下载 SVG），便于使用。
  • 大写/小写间隙微调：用来修正非等宽字体下大写字母与后续小写字母之间的不均匀视觉间隙。

功能演示

DEMO_GoogleFont

官方网站

3 个赞
2

用了一下，不错，就是字体那里不知道怎么设置更好，我换了我电脑上有的微软雅黑，不知道其它的支持不。

3

只要 Google Fonts 有的字体， TypingSVG 都支持噢~

4

发现除了浏览器外, 大多数看图软件都不支持动画svg.

5

这是因为动画 SVG 不只是矢量图，还包含 <animate>、<animateTransform>、<animateMotion> 等动态元素。

浏览器内置的 HTML/CSS/JS 渲染引擎能解析这些动画标签，而大多数看图软件并没有这项功能，所以在开启动画 SVG 时会失败。

为了更直观理解，这里附上一个基本的动画 SVG~ :grinning_face:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="20" fill="red">
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>
1 个赞
6

刚更新了程式码，解决" 非等宽字体 下，大写字母与后续小写字母之间有不均匀视觉间隙" 的问题~

7

[更新] 实现自定义文字内容行高的功能

image