SVG中 text 文本的自动换行

最新推荐文章于 2024-09-02 08:17:16 发布

照物华

最新推荐文章于 2024-09-02 08:17:16 发布

阅读量6.4k

点赞数

分类专栏： WEB前端文章标签： svg text多行文本

本文链接：https://blog.csdn.net/daihaoxin/article/details/106107916

版权

WEB前端专栏收录该内容

58 篇文章 1 订阅

订阅专栏

今天在做一个使用svg做的交互动画，使用到了svg 里的 text 元素，遇到了换行的问题。最后采用了 foreignObject 包裹 DOM 元素，利用 DOM 的文本布局能力自动处理换行，无需计算内部坐标。

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <foreignObject width="480" height="115" x="100" y="100">
     <body xmlns="http://www.w3.org/1999/xhtml">
        <div class="s-content">
        基于页面JS嵌码技术的真实用户性能监测产品，实时监控网站、WAP站、HTML5页面等在使用过程中出现的页面加载慢、JS错误、AJAX请求过慢等性能问题。
        </div>
    </body>
  </foreignObject>
</svg>

这种方式适合不确定具体内容的适合。如果遇到需要精准处理的适合，可以使用下面一种方式，用 tspan 把 text 拆成多行，重新计算每个tspan 的 y 坐标。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text font-size="14">
    <tspan x="0" y="10">大数据交互可视化</tspan>
    <tspan x="0" y="28">大数据量运维优化</tspan>
  </text>
</svg>