SVG text文本换行和foreignObject换行对比实例页面

回到相关文章 »

效果：

SVG <text>实现

一段需要word wrap 的文字。

SVG <foreignObject>实现

一段需要word wrap的文字。

代码：

HTML代码：
<svg xmlns="http://www.w3.org/2000/svg">
  <text font-size="12">
    <tspan x="0" y="10">一段需要word wrap</tspan>
    <tspan x="0" y="26">的文字。</tspan>
  </text>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="120" height="50">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p style="font-size:12px;margin:0;">一段需要word wrap的文字。</p>
      </body>
    </foreignObject>
</svg>