svg里的text不能自动换行的解决办法

最新推荐文章于 2026-03-27 14:33:23 发布

原创最新推荐文章于 2026-03-27 14:33:23 发布 · 5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js #d3.js #svg #text

Javascript 专栏收录该内容

5 篇文章

订阅专栏

SVG中的text元素默认不支持自动换行，通过两种方法可实现多行文本：一是创建多个text元素并设置不同坐标；二是使用单个text元素内嵌tspan子标签。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

svg里的text不能自动换行，使用\n等方法都无效。

可以使用两个方法去实现多行文本。

方法一： 添加多个text，给这两个text赋一样的class，每个text设置不同的x，y坐标

const svg = d3.select("#oee-chart")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg
   .append('text')
   .attr('class','oeeText')
   .attr("text-anchor", "middle")
   .attr('font-size', '1.5em')
   .attr('y', -25)
   .text('xxx content');

svg
   .append('text')
   .attr('class','oeeText')
   .attr("text-anchor", "middle")
   .attr('font-size', '1.5em')
   .attr('y', 20)
   .text('yyy content');

方法二： 添加一个text，然后给text添加多个子标签tspan

 d3.select("#oeeText").remove();

 let middleText = svg
   .append('text')
   .attr('id','oeeText');
   
 // d3.select('#oeeText')
 middleText
    .append("tspan")
    .attr("text-anchor", "middle")
    .attr('font-size', '1.5em')
    .attr('y', -25)
    .text('yyy content');
 
 // d3.select('#oeeText')
 middleText
   .append("tspan")
   .attr("text-anchor", "middle")
   .attr('font-size', '2.5em')
   .attr('y', 20)
   .text('xxx content');