foreignObject标签svg文字换行

注意 ios浏览器和ie不支持foreignObject

用svg的text标签文字换行难控制

在foreignObject标签里可以写html, 并且用css控制文字换行，使用前在caniuse里查看是否适配所用浏览器

基本格式

<foreignObject width="100" height="200">
    <div style="display:flex;justify-content:center;align-items:center;.........">xxxxxx</div>
</foreignObject>

js动态代码

const width = 200,
      height = 150,
      html = `123465789`;

const NS = 'http://www.w3.org/2000/svg';
const foreignObject = document.createElementNS(NS, 'foreignObject');
foreignObject.setAttribute('width', width);
foreignObject.setAttribute('height', height);
foreignObject.innerHTML = `<div xmlns="${NS}" style="width:100%;height:100%;font-size:12px;padding:0 8px;color:#fff;display:flex;justify-content:center;align-items:center;line-height: 12px;">${html}</div>`;