foreignObject标签svg文字换行

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

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

基本格式


    
xxxxxx

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 = `
${html}
`;

你可能感兴趣的:(htmlsvg)