SVG <foreignObject>简介与截图等应用 （转载）

一、从SVG文本换行说起

SVG和CSS几乎可以看成是同一个年代出来的东西，但是在Web界面展示这块，CSS长期统领江山，SVG偃旗息鼓，直到这些年，SVG开始乘势而上。

时势造英雄。当年web网页都是以图文展示为主，所以门户，博客这些网站兴起。而SVG擅长的是图形展示，对于文本呈现，只能嘿嘿一下，跟CSS相比那可就弱了几条街。举个最简单的效果，文本换行。在CSS下，当我们一段文字很长的时候，是会自动换到下一行的，但是在SVG中，基本上就是要手动控制换行，对于新闻、博客展示而言简直就是噩梦。于是，CSS火了，SVG萎了。

但，时代是发展的，现代网络带宽有大腿粗，电脑性能比第一次还快，屏幕密度比姚明还高，丰富的富媒体展现和复杂的图形表现需求越来越高，随着flash的日渐衰微，显然，规范标准化的SVG就顺势崛起。

然而需求是千变万化的，当我们使用SVG实现一些视觉表现精湛的效果的时候，免不了会有增加一段描述文字的需求。呵呵，这个时候SVG怕是要傻眼了，SVG的<text>元素应付多行文字实在不擅长，如果SVG中的文字可以如同CSS中的表现一样就好了？

嘿，还真有，那就是SVG的<foreignObject>元素。

二、SVG forginObject元素简介

我们平常使用SVG使用的是SVG的命名空间：

<svg xmlns="http://www.w3.org/2000/svg"></svg>

xmlns全称是“XML Namespaces”，指“XML命名空间”。XML是一个比较大的统称，是一种用于标记电子文件使其具有结构性的标记语言。我们平时写的HTML代码是XML，RSS订阅文档也是种XML，SVG也属于XML。而这些XML类型的渲染规则是有差异的，例如HTML中裸露的<circle>元素是不会表现为圆，而是一个普通的自定义元素。RSS中的XML浏览器会自动进行文章排版渲染等。

所以我们可以看到，指定命名空间可以让浏览器精准解析，举个例子，如下XML代码：

<svg width="12" height="12" viewBox="0 0 12 12"><path d="M10.263 10.874L6 6.61l-4.264 4.264a.431.431 0 0 1-.61-.61L5.39 6.001 1.128 1.736a.431.431 0 0 1 .61-.61L6 5.391l4.264-4.263a.431.431 0 0 1 .61.61L6.61 6l4.262 4.264a.43.43 0 1