<!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/[email protected]/dist/hanzi-writer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
标签：const,family,svg,生成器,字帖,let,font,page From： https://www.cnblogs.com/muamaker/p/18390801