汉字按笔画书写 生成动画 ，svg
最近在做汉字生成笔顺svg文件，和拼音在github上找到了Hanzi Writer，感觉很好用，记录一下。
Hanzi Writer 对汉字生成svg文件
以中国为例。
安装：npm install hanzi-writer安装。
const HanziWriter = require('hanzi-writer');
展示div: 位于iview tableColumns中。
{title: '笔顺',key: 'action',width: 500,render: (h, params) => {this.svg(params.row)return h('div', {class: 'class_' + params.row.characterId})}}
row.characterName :要生成的汉字
row.characterId: 这一行的id（我放在了一个iview tableColumns中了，使用class+ id 对每行的div起标识，之前也想用id了，但是发现id不可以使用- _ -! 但是用class控制div发现是好使的，所以下面使用class_ + row.characterId控制。小白一个，具体也不知道怎么回事。）
方法：
svg (row) {console.log(row)const HanziWriter = require('hanzi-writer')HanziWriter.loadCharacterData(row.characterName).then(function (charData) {/** 每次添加清空原div中内容 */document.getElementsByClassName('class_' + row.characterId)[0].innerHTML = ''var target = document.getElementsByClassName('class_' + row.characterId)[0]for (var i = 0; i < charData.strokes.length; i++) {var strokes = charData.strokes.slice(0, i + 1)var svg = document.createElementNS('/2000/svg', 'svg')svg.style.width = '20px'svg.style.height = '20px'svg.style.border = '1px solid #EEE'svg.style.marginRight = '3px'target.appendChild(svg)var group = document.createElementNS('/2000/svg', 'g')// set the transform property on the g element so the character renders at 75x75var transformData = HanziWriter.getScalingTransform(20, 20)group.setAttributeNS(null, 'transform', transformData.transform)svg.appendChild(group)strokes.forEach(function (strokePath) {var path = document.createElementNS('/2000/svg', 'path')path.setAttributeNS(null, 'd', strokePath)// style the character pathspath.style.fill = '#555'group.appendChild(path)})}})
输出结果：
还可以生成书写动画，功能很强大。
Hanzi Writer github地址->Hanzi Writer github地址
