代码改变世界

字帖生成器

2024-08-31 21:33  muamaker  阅读(15)  评论(0编辑  收藏  举报

 

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.header label{
				margin-right: 10px;
			}
			.header input[type=number]{
				height: 28px;
			}
			button{
				margin-right: 10px;
				height: 32px;
				width: 128px;
				cursor: pointer;
			}
			.result_container {
			    overflow: auto;
			    width: 100%;
			    max-height: 1200px;
			    border: 1px solid #d9d9d9;
			    box-sizing: border-box;
			    padding: 15px;
			}
			.svg_page:not(:last-child) {
			    page-break-after: always;
			}
			.svg_page {
			    margin: 0 0 15px 0;
			    padding: 0;
			    overflow: hidden !important;
			    page-break-inside: avoid;
			    border: 1px solid #d9d9d9;
			    box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
			}
		
			@page { margin: 0; padding: 0; }
		</style>
		<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/jQuery.print@1.5.1/jQuery.print.js"></script>
	</head>
	<body>
		<div class="header">
			<div>
				<textarea  id="input" cols="104" rows="10">静夜思
					唐 - 李白
				床前明月光,疑是地上霜。
				举头望明月,低头思故乡。
				 </textarea>
			</div>
			<label>样例:<input id="example" type="color" value="#333333"  /></label>
			<label>笔画:<input id="path" type="color" value="#f44336"  /></label>
			<label>临摹:<input id="drawn" type="color" value="#9d9d9d"  /></label>
			<label>临摹行数:<input id="row" type="number" value="2"  /></label>
			<button id="start">生成</button>
			<button id="print">打印</button>
		</div>
		<div class="result_container" id="resultContainer">
			<div id="allSvgContainer">
			</div>
		</div>
	</body>
	<script>
		const box = document.querySelector("#allSvgContainer");


		const createPage = () => {
			let svg_page = document.createElement('div');
			svg_page.className = 'svg_page';
			svg_page.style = 'width:calc( 210mm - 1px);height:calc( 297mm - 1px );';
			svg_page.innerHTML =
				`<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="793.8" height="1122.66" viewBox="0 0 793.8 1122.66"><style>.nothing{}.simsun_font{font-family:simsun, SimSun, 宋体;}.simkai_font{font-family:simkai, KaiTi, 楷体;}.simhei_font{font-family:simhei, SimHei, 黑体;}.simli_font{font-family:simli, LiSu, 隶书;}.simyou_font{font-family:simyou, YouYuan, 幼圆;}.simzhangqingpingkai_font{font-family:simzhangqingpingkai;}.simyrdzst_font{font-family:simyrdzst;}.simfang_font{font-family:simfang, 仿宋;}.muyao-softbrush_font{font-family:muyao-softbrush;}.wqsft_1_1306613_10_font{font-family:wqsft_1_1306613_10;}.wqsxt-46231_font{font-family:wqsxt-46231;}.sjjnyyjyy_font{font-family:sjjnyyjyy;}.muyaopleased_font{font-family:muyaopleased;}.f38391d2eb9077fe72ae5d1c350fc0f6_font{font-family:f38391d2eb9077fe72ae5d1c350fc0f6;}.qiantubifengshouxieti_font{font-family:qiantubifengshouxieti;}.qiantuxianmoti_font{font-family:qiantuxianmoti;}.longcang-regular_font{font-family:longcang-regular;}.shoushuti_font{font-family:shoushuti;}.aajianhaoti_font{font-family:aajianhaoti;}.pfanhututi-regular_font{font-family:pfanhututi-regular;}.chillzhuo_font{font-family:chillzhuo;}.jasonhandwriting6-regular_font{font-family:jasonhandwriting6-regular;}.font_14b7a09dee57c514e9e58c58399dc05f_font{font-family:font_14b7a09dee57c514e9e58c58399dc05f;}.alexeicopperplate_font{font-family:alexeicopperplate;}.AlibabaSans_font{font-family:AlibabaSans;}.hengshui_font{font-family:hengshui;}.italic_font{font-family:italic, HengShuiTi;}.madina_font{font-family:madina;}.segoeprint_font{font-family:segoeprint;}.shuyaohengshui_font{font-family:shuyaohengshui;}.spencerianladyshandsw_font{font-family:spencerianladyshandsw;}.chong_xi_small_seal_font{font-family:Chong Xi Small Seal;}.border{stroke-width:1;stroke:#13B061;fill:none;}.sec_l{fill:none;stroke:#13B061;stroke-width:1;stroke-dasharray:1 2;}.sec_r{fill:none;stroke:#13B061;stroke-width:1;stroke-dasharray:1 2;}.sec_text{fill:#9D9D9D;text-anchor:middle;dominant-baseline:central;}.default_text{fill:#333333;text-anchor:middle;dominant-baseline:central;}.sec_pinyin{fill:#9D9D9D;font-family:simsun, SimSun, 宋体;text-anchor:middle;dominant-baseline:central;}.default_pinyin{fill:#333333;font-family:simsun, SimSun, 宋体;text-anchor:middle;dominant-baseline:central;}</style><rect width="718.1999999999999" height="1012.4499999999999" x="37.8" y="37.8" stroke-width="3" stroke="#13b061" fill="none"></rect><g id="SvgjsG5211"><g id="SvgjsG5210"><rect width="58.85" height="58.85" x="43.80" y="43.80" class="border"></rect><line x1="73.22" y1="43.80" x2="73.22" y2="102.65" class="sec_l"></line><line x1="43.80" y1="73.22" x2="102.65" y2="73.22" class="sec_l"></line></g><use href="#SvgjsG5210" x="58.85"></use><use href="#SvgjsG5210" x="117.70"></use><use href="#SvgjsG5210" x="176.55"></use><use href="#SvgjsG5210" x="235.40"></use><use href="#SvgjsG5210" x="294.25"></use><use href="#SvgjsG5210" x="353.10"></use><use href="#SvgjsG5210" x="411.95"></use><use href="#SvgjsG5210" x="470.80"></use><use href="#SvgjsG5210" x="529.65"></use><use href="#SvgjsG5210" x="588.50"></use><use href="#SvgjsG5210" x="647.35"></use></g><svg x="55.57" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="58.85"></use><svg x="55.57" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="117.70"></use><svg x="55.57" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="176.55"></use><svg x="55.57" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="235.40"></use><svg x="55.57" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="294.25"></use><svg x="55.57" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="353.10"></use><svg x="55.57" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="411.95"></use><svg x="55.57" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="470.80"></use><svg x="55.57" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="529.65"></use><svg x="55.57" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="588.50"></use><svg x="55.57" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="647.35"></use><svg x="55.57" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="706.20"></use><svg x="55.57" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="765.05"></use><svg x="55.57" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="823.90"></use><svg x="55.57" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="882.75"></use><svg x="55.57" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="941.60"></use><svg x="55.57" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg></svg>`;
			box.appendChild(svg_page);
			return svg_page;
		}

		function renderFanningStrokes(svg, strokes,color='#555',lastColor) {
			
			lastColor = lastColor || color;
			
			var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');

			// set the transform property on the g element so the character renders at 75x75
			var transformData = HanziWriter.getScalingTransform(1000, 1000);
			group.setAttributeNS(null, 'transform', transformData.transform);
			svg.appendChild(group);

			strokes.forEach(function(strokePath,index) {
				var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
				path.setAttributeNS(null, 'd', strokePath);
				// style the character paths
				path.style.fill = index == strokes.length-1 ?  lastColor:  color;
				
				group.appendChild(path);
			});
		}




		let collect = [];
		const cloNmu = 12;
		// 每行 12 个
		const getDom = () => {
			if (collect.length == 0) {
				let page = createPage();
				collect = Array.from(page.querySelectorAll('svg svg'));
			}
			let dom =  collect.shift();
			return dom
		}
		const main = async () => {
			// 点击过快会有问题,但是不想处理,可以加loading
			collect = [];
			box.innerHTML = '';
			let text = document.querySelector('#input').value;
			const regexHanRange = /[\u4e00-\u9fa5]/mg;
			
			let list = text.match(regexHanRange) || [];
			for (let i = 0; i < list.length; i++) {
				let word = (list[i] || '').trim();
				if(word){
					let charData = await HanziWriter.loadCharacterData(list[i]);
					renderOne(charData)
				}
			}

		}
		
		const renderOne = (charData)=>{
			// #f44336
			// #9d9d9d
			// #333333
			const example = document.querySelector('#example').value || '#333333';
			const path = document.querySelector('#path').value ||  "#f44336";
			const drawn = document.querySelector('#drawn').value || '#9d9d9d';
			const row = parseInt( document.querySelector('#row').value)  || 2
			// 渲染完整例文字
			renderFanningStrokes(getDom(), charData.strokes,example);
			for (var i = 0; i < charData.strokes.length; i++) {
				var strokesPortion = charData.strokes.slice(0, i + 1);
				// 渲染笔画
				renderFanningStrokes(getDom(), strokesPortion,drawn,path);
			}
			// 渲染最后需要多少行
			let num = collect.length%cloNmu + cloNmu *row;
			for(let i = 0 ; i < num; i++){
				renderFanningStrokes(getDom(), charData.strokes,drawn);
			}
		}
		
		document.querySelector('#start').onclick = main;
		
		document.querySelector("#print").onclick = ()=>{
			$("#allSvgContainer").print({
				globalStyles: true,
				mediaPrint: true,
				stylesheet: null,
				noPrintSelector: ".no-print",
				iframe: true,
				append: null,
				prepend: null,
				manuallyCopyFormValues: true,
				deferred: $.Deferred(),
				timeout: 750,
				title: null,
				doctype: '<!doctype html>',
				
			});
		}
	</script>
</html>

  

  

 

参考网站:

https://www.lddgo.net/string/copybook-generate