基于Github的makemeahanzi项目开发，项目地址：https://www.skishore.me/makemeahanzi/
笔顺图及书写动画实现
里面提供了9574个汉字的SVG笔顺内容和gif动画。根据这里数据，实现了汉字的笔顺图和笔顺书写gif图，现将程序分享出来，有兴趣的朋友可以进行有趣的扩展。
以“愛”字为例，它是以汉字的十进制编码命名，有两种格式，双击打开svg文件
# 读取svgs生成笔顺图.py
import os
import json
import xml.etree.ElementTree as ET
import 获取笔顺
from concurrent.futures import ThreadPoolExecutor
def process_svg(svg, path, index, total_num):
"""处理单个SVG文件的函数"""
try:
char_number = svg.split('-')[0]
dec_num = int(char_number)
char = chr(dec_num) # 转汉字
svg_path = os.path.join(path, svg)
# 读取SVG文件
root = ET.parse(svg_path).getroot()
# 使用命名空间来查找path元素
ns = {'svg': 'http://www.w3.org/2000/svg'}
path_elements = root.findall('.//svg:path', ns)
svg_path_data = [path.attrib['d'] for path in path_elements] # 获取笔顺内容
print(f'{index} / {total_num} 正在生成 {char} 的笔顺图...')
# 传入数据
获取笔顺.main(svg_path_data, char)
except Exception as e:
print(f"处理 {svg} 时出错: {e}")
def main():
path = r'makemeahanzi-master\svgs-still'
svgs_list = os.listdir(path)
total_num = len(svgs_list)
# 创建线程池，max_workers设置并发线程数
with ThreadPoolExecutor(max_workers=4) as executor:
# 提交所有任务到线程池
futures = []
for index, svg in enumerate(svgs_list):
futures.append(
executor.submit(process_svg, svg, path, index, total_num)
)
# 等待所有任务完成
for future in futures:
future.result() # 这里会抛出异常，如果有的话
if __name__ == '__main__':
main()
# 获取笔顺.py
from cairosvg import svg2png
import os
import re
def makedirs(path):
if not os.path.exists(path):
os.makedirs(path)
def ChangeSVG2png(svg_path, chinese):
outputpath = f'strokeOrder/{chinese}' # 笔顺保存路径
makedirs(outputpath)
# 如果笔顺图跟笔顺list相等，则说明已经生成过了
png_files = sorted([f for f in os.listdir(outputpath)
if f.startswith(f'{chinese}_') and f.endswith('.png')])
if len(png_files) == len(svg_path):
print(f'*** {chinese} 的笔顺图已经生成，跳过***')
return
svg_output = {
'width': '1024px',
'height': '1024px',
'xmlns': 'http://www.w3.org/2000/svg',
"font_color": "#000000", # 黑色
"font_color_last": "#FF1111", # 红色
# "font_color_last": "#0000FF", # 蓝色
"output_address": outputpath,
"output_filename": ''
}
if not os.path.exists(outputpath): # 为每个汉字创建文件夹
os.mkdir(outputpath)
# Grid lines (米字格)
# 在 ChangeSVG2png 函数中添加以下米字格定义（替换原来的 grid_lines）
grid_lines = [
# 对角线（长线，保持实线但更细）
'<line x1="0" y1="0" x2="1024" y2="1024" style="stroke:#EEEEEE;stroke-width:4;stroke-dasharray:10,10"/>',
'<line x1="1024" y1="0" x2="0" y2="1024" style="stroke:#EEEEEE;stroke-width:4;stroke-dasharray:10,10"/>',
# 中心横竖线（虚线小线段）
'<line x1="0" y1="512" x2="1024" y2="512" style="stroke:#EEEEEE;stroke-width:4;stroke-dasharray:10,10"/>',
'<line x1="512" y1="0" x2="512" y2="1024" style="stroke:#EEEEEE;stroke-width:4;stroke-dasharray:10,10"/>',
# 添加更多小线段作为辅助格子（可选）
# '<line x1="256" y1="0" x2="256" y2="1024" style="stroke:#F5F5F5;stroke-width:2"/>',
# '<line x1="768" y1="0" x2="768" y2="1024" style="stroke:#F5F5F5;stroke-width:2"/>',
# '<line x1="0" y1="256" x2="1024" y2="256" style="stroke:#F5F5F5;stroke-width:2"/>',
# '<line x1="0" y1="768" x2="1024" y2="768" style="stroke:#F5F5F5;stroke-width:2"/>'
]
if len(svg_path) == 1:
svg_code = []
svg_code_temp = '<svg style="width:' + svg_output['width'] + '; height:' + svg_output['height'] + ';" xmlns="' + \
svg_output['xmlns'] + '">'
svg_code.append(svg_code_temp)
# Add grid lines
svg_code.extend(grid_lines)
svg_code_temp = ' <g transform="translate(0, 900) scale(1, -1)">'
svg_code.append(svg_code_temp)
svg_code_temp = ' <path d="' + svg_path[0] + '" style="fill:' + svg_output[
'font_color_last'] + ';"></path>'
svg_code.append(svg_code_temp)
svg_code_temp = ' </g>'
svg_code.append(svg_code_temp)
svg_code_temp = '</svg>'
svg_code.append(svg_code_temp)
svgcode = '\n'.join(svg_code)
svg_output['output_filename'] = svg_output['output_address'] + '/' + chinese + '1.png'
try:
svg2png(bytestring=svgcode, write_to=svg_output['output_filename'])
except Exception as e:
print('error:' + str(e))
# 生成完整的笔顺图，生成svg图片
svg_code = []
svg_code_temp = '<svg style="width:' + svg_output['width'] + '; height:' + svg_output[
'height'] + ';" xmlns="' + svg_output['xmlns'] + '">'
svg_code.append(svg_code_temp)
# Add grid lines
# svg_code.extend(grid_lines) # 这里确定是否在svg中添加米字格
svg_code_temp = '<g transform="translate(0, 900) scale(1, -1)">'
svg_code.append(svg_code_temp)
for j in range(len(svg_path)):
svg_code_temp = ' <path d="' + svg_path[j] + '" style="fill:' + svg_output[
'font_color'] + ';"></path>'
svg_code.append(svg_code_temp)
svg_code_temp = ' </g>'
svg_code.append(svg_code_temp)
svg_code_temp = '</svg>'
svg_code.append(svg_code_temp)
svgcode = '\n'.join(svg_code)
svg_output['output_filename'] = svg_output['output_address'] + '/' + chinese + '.svg' # 修改文件扩展名为.svg
try:
with open(svg_output['output_filename'], 'w') as f:
f.write(svgcode)
except Exception as e:
print('error:' + str(e))
else:
for i in range(len(svg_path)):
svg_code = []
svg_code_temp = '<svg style="width:' + svg_output['width'] + '; height:' + svg_output[
'height'] + ';" xmlns="' + svg_output['xmlns'] + '">'
svg_code.append(svg_code_temp)
# Add grid lines
svg_code.extend(grid_lines)
svg_code_temp = ' <g transform="translate(0, 900) scale(1, -1)">'
svg_code.append(svg_code_temp)
for j in range(i + 1):
if j == i:
svg_code_temp = ' <path d="' + svg_path[j] + '" style="fill:' + svg_output[
'font_color_last'] + ';"></path>'
else:
svg_code_temp = ' <path d="' + svg_path[j] + '" style="fill:' + svg_output[
'font_color'] + ';"></path>'
svg_code.append(svg_code_temp)
svg_code_temp = ' </g>'
svg_code.append(svg_code_temp)
svg_code_temp = '</svg>'
svg_code.append(svg_code_temp)
svgcode = '\n'.join(svg_code)
svg_output['output_filename'] = svg_output['output_address'] + '/' + chinese + '_' + str(i + 1) + '.png'
try:
svg2png(bytestring=svgcode, write_to=svg_output['output_filename'])
except Exception as e:
print('error:' + str(e))
# 生成完整的笔顺图，生成svg图片
svg_code = []
svg_code_temp = '<svg style="width:' + svg_output['width'] + '; height:' + svg_output[
'height'] + ';" xmlns="' + svg_output['xmlns'] + '">'
svg_code.append(svg_code_temp)
# Add grid lines
# svg_code.extend(grid_lines) # 这里确定是否在svg中添加米字格
svg_code_temp = '<g transform="translate(0, 900) scale(1, -1)">'
svg_code.append(svg_code_temp)
for j in range(len(svg_path)):
svg_code_temp = ' <path d="' + svg_path[j] + '" style="fill:' + svg_output[
'font_color'] + ';"></path>'
svg_code.append(svg_code_temp)
svg_code_temp = ' </g>'
svg_code.append(svg_code_temp)
svg_code_temp = '</svg>'
svg_code.append(svg_code_temp)
svgcode = '\n'.join(svg_code)
svg_output['output_filename'] = svg_output['output_address'] + '/' + chinese + '.svg' # 修改文件扩展名为.svg
try:
with open(svg_output['output_filename'], 'w') as f:
f.write(svgcode)
except Exception as e:
print('error:' + str(e))
def main(svg_path, chinese):
ChangeSVG2png(svg_path, chinese)
if __name__ == '__main__':
svg_data = '''
<path d="M 443 715 Q 449 729 501 798 Q 513 811 498 827 Q 455 862 426 860 Q 414 860 416 844 Q 421 780 378 709 Q 357 673 321 635 Q 302 623 270 583 Q 265 573 269 570 Q 270 569 276 570 Q 341 581 428 694 L 443 715 Z" class="stroke1"/>
<path d="M 531 559 Q 586 639 667 694 Q 682 703 678 714 Q 678 717 674 720 Q 664 730 615 758 Q 604 762 592 759 L 581 754 Q 576 754 488 725 Q 470 718 443 715 C 413 711 400 703 428 694 Q 442 686 480 690 Q 498 692 525 696 Q 551 700 557 698 Q 560 696 559 690 Q 534 610 490 552 L 490 551 C 473 526 514 534 531 559 Z" class="stroke2"/>
<path d="M 314 527 Q 308 533 255 539 Q 246 539 241 537 Q 239 537 237 535 Q 233 529 237 521 L 243 511 Q 279 455 302 372 Q 309 345 326 329 Q 342 314 349 319 Q 351 321 353 325 L 355 339 L 349 374 L 323 488 C 316 517 314 527 314 527 Z" class="stroke3"/>
<path d="M 700 406 Q 739 488 776 504 Q 798 523 782 545 Q 764 563 708 595 Q 688 606 663 598 Q 598 574 531 559 L 490 551 Q 402 535 314 527 C 284 524 294 479 323 488 Q 331 490 343 494 L 504 520 Q 562 533 624 543 Q 647 547 662 543 Q 670 540 674 535 Q 681 526 665 478 L 646 425 Q 645 423 643 419 C 632 391 687 379 700 406 Z" class="stroke4"/>
<path d="M 425 348 L 580 366 L 705 374 Q 714 376 717 385 Q 717 392 700 406 L 643 419 L 636 419 Q 564 404 498 393 L 437 384 L 349 374 C 319 371 325 339 355 339 L 368 339 L 425 348 Z" class="stroke5"/>
<path d="M 310 192 L 323 194 Q 412 213 472 223 Q 492 225 490 235 Q 490 237 488 241 Q 474 256 449 259 Q 421 261 368 243 Q 345 235 310 220 C 282 208 280 187 310 192 Z" class="stroke6"/>
<path d="M 310 220 Q 310 295 308 296 Q 284 318 263 327 Q 251 332 242 331 Q 230 327 232 316 Q 265 251 262 157 L 261 143 Q 257 97 217 55 Q 208 41 210 25 L 210 24 L 212 18 Q 220 -8 231 -18 Q 239 -23 247 -19 Q 251 -16 255 -12 Q 276 18 449 118 Q 468 127 472 134 Q 476 144 468 145 Q 457 145 323 94 Q 309 89 306 96 Q 304 98 304 106 Q 308 143 310 192 L 310 220 Z" class="stroke7"/>
<path d="M 741 333 L 739 325 Q 737 295 662 247 Q 604 210 589 199 C 564 182 559 171 588 180 Q 657 201 690 216 Q 765 250 796 254 Q 816 257 813 274 L 813 278 Q 806 299 784 318 Q 762 337 752 337 Q 743 338 741 333 Z" class="stroke8"/>
<path d="M 589 199 Q 593 247 600 287 Q 602 300 599 306 Q 597 311 592 314 Q 581 326 557 335 Q 544 339 535 334 Q 529 331 531 322 Q 546 253 546 237 Q 544 126 547 99 Q 548 82 553 61 Q 558 38 580 20 Q 637 -27 757 -18 Q 780 -16 800 -12 Q 823 -7 836 -3 Q 872 9 911 37 Q 923 47 919 61 Q 919 63 916 69 Q 907 87 894 165 Q 894 177 888 182 Q 885 184 883 179 Q 882 179 879 171 Q 848 99 838 71 Q 823 55 790 45 Q 741 30 684 38 Q 652 43 635 50 Q 609 61 600 80 Q 583 115 587 166 L 588 180 L 589 199 Z" class="stroke9"/>
'''
stroke_order = []
for line in svg_data.split('\n'):
if line.strip():
match = re.search(r'd="([^"]+)"', line)
if match:
path_data = match.group(1)
stroke_order.append(path_data)
# 生成笔顺图
chinese = '㲋' # 修改为您要生成的汉字
svg_path = [x for x in stroke_order]
print(svg_path)
print(len(svg_path))
main(svg_path, chinese)
注：需要安装cairosvg程序（gtk3-runtime-3.24.31-2022-01-04-ts-win64），我会在附件中提供
此程序会生成笔顺图png（旧笔顺为黑色、新笔顺为红色），并生成一个完整的svg文件（全黑）
书写动画gif生成
# 生成gif.py
import os
import asyncio
from playwright.async_api import async_playwright
import subprocess
import math
from concurrent.futures import ThreadPoolExecutor
async def svg_to_gif(char, unhandled_num, svg_path, gif_path, frame_rate=12):
"""将 SVG 动画转换为 GIF，并替换蓝色为红色"""
frames_dir = os.path.join(os.path.dirname(gif_path), f"{char}_frames")
os.makedirs(frames_dir, exist_ok=True)
async with async_playwright() as p:
browser = await p.chromium.launch()
page = await browser.new_page()
await page.set_viewport_size({"width": 1024, "height": 1024})
# 读取 SVG 并替换颜色
with open(svg_path, 'r', encoding='utf-8') as f:
svg_content = f.read()
# 关键修改：替换蓝色为红色
svg_content = svg_content.replace("stroke: blue", "stroke: #FF1111")
await page.set_content(f"""
<!DOCTYPE html>
<html>
<head>
<style>
body {{ margin: 0; background: transparent; }}
svg {{
width: 1024px;
height: 1024px;
position: absolute;
left: 0;
top: 0;
}}
</style>
</head>
<body>
{svg_content}
</body>
</html>
""")
# 计算动画时长（保持不变）
await page.wait_for_selector('svg')
await page.wait_for_timeout(500)
total_duration = await page.evaluate("""() => {
const anims = Array.from(document.querySelectorAll('*'))
.flatMap(el => el.getAnimations?.() || []);
return anims.length? Math.max(...anims.map(a => {
const timing = a.effect.getComputedTiming();
return timing.endTime || timing.delay + timing.duration;
})) / 1000 : 0;
}""")
if not total_duration or math.isnan(total_duration):
print("使用默认动画时长 5 秒")
total_duration = 5.0
total_frames = int(total_duration * frame_rate)
print(f"处理 {os.path.basename(svg_path)}: 时长 {total_duration:.2f}s, 总帧数 {total_frames}")
# 捕获帧
for frame in range(total_frames):
current_time = (frame / total_frames) * total_duration * 1000
await page.evaluate("""(time) => {
document.getAnimations().forEach(anim => anim.currentTime = time);
}""", current_time)
await page.screenshot(
path=os.path.join(frames_dir, f"frame_{frame:04d}.png"),
type="png",
omit_background=True,
clip={"x": 0, "y": 0, "width": 1024, "height": 1024}
)
print(f"\r{os.path.basename(svg_path)} 渲染进度: {frame + 1}/{total_frames}", end='')
await browser.close()
# 生成 GIF
print(f"\n{os.path.basename(svg_path)} 生成 GIF...")
try:
subprocess.run([
"ffmpeg", "-y",
"-framerate", str(frame_rate),
"-i", os.path.join(frames_dir, "frame_%04d.png"),
"-vf", "split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse",
"-loop", "0",
gif_path
], check=True, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
print(f"{unhandled_num} {os.path.basename(svg_path)} GIF 已生成: {gif_path}")
except subprocess.CalledProcessError as e:
print(f" {os.path.basename(svg_path)} FFmpeg 错误: {e}")
# 清理临时文件
for file in os.listdir(frames_dir):
os.remove(os.path.join(frames_dir, file))
os.rmdir(frames_dir)
def process_single(svg_path, char, unhandled_num, char_gif_path):
"""处理单个文件"""
char_gif_path_name = os.path.join(char_gif_path, f'{char}.gif')
asyncio.run(svg_to_gif(char, unhandled_num, svg_path, char_gif_path_name, frame_rate=15))
def main(svg_dir, max_workers=4):
"""多线程主函数"""
svg_files = []
svg_list = os.listdir(svg_dir)
# 保存路径
char_gif_path = f'Gifs'
os.makedirs(char_gif_path, exist_ok=True)
gifs_list = [gif.split('.')[0] for gif in os.listdir(char_gif_path) if gif.endswith('.gif')]
# 比对未保存的，拿来使用
svg_unhandled_list = []
for tmp in svg_list:
char_code = int(os.path.splitext(tmp)[0])
char = chr(char_code)
if not char in gifs_list:
svg_unhandled_list.append(tmp)
unhandled_num = len(svg_unhandled_list)
for svg in svg_unhandled_list:
try:
char_code = int(os.path.splitext(svg)[0])
char = chr(char_code)
svg_files.append((os.path.join(svg_dir, svg), char))
except ValueError:
print(f"跳过非数字文件名: {svg}")
with ThreadPoolExecutor(max_workers=max_workers) as executor:
futures = []
for svg_path, char in svg_files:
futures.append(executor.submit(process_single, svg_path, char, unhandled_num, char_gif_path))
for future in futures:
try:
future.result() # 等待任务完成
except Exception as e:
print(f"处理出错: {e}")
if __name__ == '__main__':
# 在txt中保存进度
svg_dir = r'makemeahanzi-master\svgs'
main(svg_dir, max_workers=4) # 设置同时处理4个文
