汉字按笔画书写 生成动画 ，svg (使用Hanzi Writer)

汉字按笔画书写 生成动画 ，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('http://www.w3.org/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('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(20, 20)
          group.setAttributeNS(null, 'transform', transformData.transform)
          svg.appendChild(group)
          strokes.forEach(function (strokePath) {
            var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
            path.setAttributeNS(null, 'd', strokePath)
            // style the character paths
            path.style.fill = '#555'
            group.appendChild(path)
          })
        }
      })

输出结果：

还可以生成书写动画，功能很强大。

Hanzi Writer github地址->Hanzi Writer github地址