Svg-foreignObject

简介

<foreignObject>元素的作用是可以在其中使用具有其它XML命名空间的XML元素

也就是可以实现SVG和XHTML的混合使用

作用：

• 实现 SVG 难实现，但 CSS 好实现的特性（如果文本自动换行）
• 可以把 HTML 渲染成图片

图片生成

原理：

1. 获取对应DOM元素的outerHTML代码
2. 放在<foreignObject>元素中
3. 通过图片方式显示SVG图形
4. 借助 canvas 的 drawImage() 渲染到画布上，然后使用 canvas.toDataURL() 转换成图片