svg foreignObject主要能实现 文本换行 和 dom转图片 两个功能
1. svg文本换行
svg文字功能很弱，不支持自动换行，需要用tspan进行截断
<svg xmlns="http://www.w3.org/2000/svg">
<text font-size="16">
<tspan x="0" y="10">这个是一段要换</tspan>
<tspan x="0" y="26">行的文字</tspan>
</text>
</svg>
foreignObject支持直接嵌套dom，可利用dom实现换行
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject wwidth="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<div style="font-size:20px;">这个是一段要换行的文字</div>
</body>
</foreignObject>
</svg>
2. dom转图片
dom转图片，即所谓的网页截图，不光是截图这么简单，dom绘制的一些效果可以直接转换为svg图片，使用svg图片做一些效果，例如 背景图，mask遮罩图等，比直接用svg实现方便很多。并且 foreignObject 支持包含style标签，支持 各种样式 和 animation，可实现复杂效果
foreignObject包含的dom，可直接使用 svg文件或内联 的方式来使用图片，方便快捷，还可修改
当然也可以将svg的图片通过canvas.toDataURL转换为png或jpg图片，实现截图功能，具体可参考 使用svg进行网页截图
例如下面可实现一个自适应的边框模糊矩形
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<body class="wrap" xmlns="http://www.w3.org/1999/xhtml">
<style>
.wrap{
box-sizing: border-box;
margin: 0;
height: 100%;
padding: 10px;
}
.shadow{
height: 100%;
background:black;
border-radius:10px;
box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
}
</style>
<div class="shadow"></div>
</body>
</foreignObject>
</svg>
参考：CSS 如何实现羽化效果