svg上下反转

为了统一一套比较常用的图标字体，需要将svg上传到阿里的iconfont。
通过https://convertio.co/zh/woff-svg/ 将woff字体转成svg文件。
转换后将里面的路径提取出来。发现有些图标上下反转了。
查询svg的资料https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/transform
发现常用的命令并不能上下反转

translate 平移
scale 缩放
rotate 旋转
skewX x轴倾斜
skewY y轴倾斜

通过研究matrix变换矩阵的算法

[a c e]    
[b d f]    
[0 0 1]    
newX = a * oldX + c * oldY + e    
newY = b * oldX + d * oldY + f

只要d为-1且f为视图高度即可实现上下翻转，代码如下：

<svg viewBox='0 0 1024 1024' width='100' height='100'>
  <path 
    d='M554 384h-64v170h-64v44l86 42h42v-256zM726 298v172h84v-256h-512v-128l-170 170l170 170v-128h428zM298 726v-172h-84v256h512v128l170 -170l-170 -170v128h-428z'
  />
</svg>

<svg viewBox='0 0 1024 1024' width='100' height='100'>
  <path transform='matrix(1 0 0 -1 0 1024)'
    d='M554 384h-64v170h-64v44l86 42h42v-256zM726 298v172h84v-256h-512v-128l-170 170l170 170v-128h428zM298 726v-172h-84v256h512v128l170 -170l-170 -170v128h-428z'
  />
</svg>