text-to-svg

支持导入任意字体，并将字体中的文字转为svg，没有字体文件的可以先临时用这个：https://www.alibabafonts.com/#/font

<!DOCTYPE html>
<html lang="en">
<head>
	<title>页面标题</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="页面简介" />
</head>
<body>
	<div id="app"></div>
	<script src="https://sc01.alicdn.com/kf/Hb839ddf6328b41409976a6745c1c5fc52.txt"></script>
	<script>
// https://cdn.haoji.me/files/202406/20240611_184503_543_hXaffPCgzOE1.otf
TextToSVG.load('https://sc01.alicdn.com/kf/H78d59aec9aa84da3bd3b678564b7099ec.txt', (err, textToSVG) => {
	console.log('load success');
	  const svg = textToSVG.getSVG('阿', {
		x: 0,
		y: 0,
		anchor: 'left top',
		fontSize: 88,
	  });
	  document.body.innerHTML = svg;
  });
	</script>
</body>
</html>

hanzi-writer

https://hanziwriter.org/docs.html

一个老外写的将任意汉字按笔画顺序书写出来的库，生成svg不是它的主要功能，缺点是目前只有内置的楷体，不支持其他字体。

var writer = HanziWriter.create('character-target-div', '国', {
  width: 100,
  height: 100,
  padding: 5,
  showOutline: true
});
document.getElementById('animate-button').addEventListener('click', function() {
  writer.animateCharacter();
});