之前项目有一个需求是这样的：为用户提供一些宣传模板，支持在线编辑。用户编辑完成之后点击下载，通过html2canvas获得编辑区域的Canvas对象，再将Canvas对象转为Blob，借助file-saver实现下载功能。
类似这种渲染dom节点的库并不是很多，所以我们最后选择了html2canvas。这个库可以实现基本的需求，但是可能由于作者自身精力的原因，这个库的更新不是很频繁，在使用的过程中发现了不少小问题。
比如最近UI的同学想在模板中加入一些文字样式，让文字呈现拱桥状并且可编辑，然后就想到通过SVG中的textPath去实现，但是开发过程了其中的一些坑（在浏览器中svg的渲染都没有问题，但是使用html2canvas下载后显示有问题，所以以下注意事项都是为了兼容html2canvas），记录一下：
- 为svg元素设置样式时统一使用标签属性：
例如为了让文字水平居中，应使用text-anchor="middle"，如果使用style="text-anchor:"middle";"在Safair中不会生效。为了避免此类问题，建议全部使用标签属性。 - SVG中文字使用常见字体：
为了使模板样式更加丰富多变，有些模板引入了一些外部字体，但是使用这些字体后，html2canvas对英文字体的渲染与浏览器不一致，中文字体没有问题。换为常用字体后则没有问题。 - 文字居中
使用position+transform在html2canvas渲染时有问题。
正确方法：
水平垂直居中：<text x="50%" y="50%" text-anchor="middle">
- 在外层嵌套一层元素 在模板中，每个可编辑的位置都用了position: absolute，为svg设置position: absolute后发现位置错乱。解决方案：为svg添加父元素，用父元素去进行position: absolute的定位
- 为<path>进行留白 如果<path>标签中的路径充满svg元素视口的话，可能导致超出部分被隐藏，使用html2canvas下载后被隐藏部分没有展示。建议path的途经点与svg边界保持一定距离。
