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

最新推荐文章于 2024-06-29 18:12:36 发布

一只矿崽

最新推荐文章于 2024-06-29 18:12:36 发布

阅读量4.6k

点赞数

文章标签： js d3.js svg text

本文链接：https://blog.csdn.net/yorksome/article/details/100696196

版权

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

摘要由CSDN通过智能技术生成

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 + ","

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一只矿崽

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

svg文本换行

A杨国璇的博客

11-19

918

方法：使用 foreignObject 嵌套body-div(其他html标签) demo: <foreignObject width="xxx" height="xxx" x="8" y="xxx" fill="#000" xml:space='preserve'> <body xmlns="http://www.w3.org/1999/xhtml" class="svg-body"> <div class="xxx" style="xxx"> xxx

SVG text 自动换行算法

IT博客技术分享

11-12

2468

最近做的项目涉及到 web 绘图，采用 d3 操作svg实现。图中通常会用到文本，而svg里的text元素不像普通 DOM 元素那样能很好地处理文本换行，所以要用到一些技巧。通常有两种做法。 1.用tspan把text拆成多行，重新计算每个tspan的y坐标。 <svg xmlns="http://www.w3.org/2000/svg"> &l...

参与评论您还未登录，请先登录后发表或查看评论

text中纯数字或者英文不换行

热门推荐

sclxf的专栏

09-15

1万+

SVG 的强大能力之一是它可以将文本控制到标准 HTML 页面不可能有的程度，而无须求助图像或其它插件（后者会带来可访问性挑战）。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。　　一个不足之处是 SVG 不执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。　　可以使用 tspan 元素将文本元素分成几部分，允许每部

svg中text文本自动换行

04-07

SVG中的文本可以通过设置`<text>`元素的`textWrap`属性来进行自动换行。该属性有三个可选值：`none`、`wrap`和`truncate`。 - `none`：表示不进行自动换行，所有文本都在一行中显示。 - `wrap`：表示进行自动换行，...

D3.js封装文本实现自动换行和旋转平移等功能

10-21

本文将介绍一个名为`appendMultiText`的函数，它能够帮助我们在SVG中轻松地创建自动换行的多行文本，并且支持旋转和平移。这个函数是对之前关于SVG中使用`text`和`tspan`元素实现换行功能的进一步封装。首先，我们...

svg中text换行,vml里面textbox实现换行

傾城如夢的专栏

04-03

5441

svg中text换行：可以在text中加入tspan元素例如：啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊显示： js实现代码: var _ = this.getTextPosition(this.w, this.h), A = document.createElementNS(Gef.svgns, "text"); A.setAt

svg.textwap.js:这个插件覆盖了 SVG.Text 对象的 text 和 tspan 方法。支持给定文本宽度的文本换行。该插件基本上根据包含的空格拆分文本，并尝试对 SVG.Text 对象的指定宽度进行最佳匹配

07-09

svg.textwrap.js 这是库的插件，它覆盖了SVG.Text的默认text和tspan方法，以支持换行。 svg.textwrap.js 根据 MIT 许可条款获得许可。用法在 html 文档中包含 svg.js 后包含此插件。不要忘记指定width行的文本元素的width ，否则不会发生换行。如果使用此插件，则默认情况下所有文本项都将被文本换行。为了避免元素上的文本换行，有两种选择：如果在创建时没有为SVG.Text对象设置width则不会发生换行。如果为给定元素指定了width ，则可以通过{element}.textWrapped({boolean})方法切换该元素的换行。这允许细粒度的文本换行调整和运行时文本换行更新。该插件符合框架，因此指定的所有方法（应该）按预期工作。依赖关系除了 svg.js 本身之外，没有任何依赖项。

svg中text标签换行显示,并实现拖拽移动text标签

ju__ju的博客

04-02

2239

如图,项目中需要一个在线批阅的功能,批阅者可以在线给word文档进行批注和打勾打叉等功能,后来又追加移动批注和批注换行的功能,想法就是用户通过\n或者按钮等操作对文本进行一个切割, 例如图片中的文本嘻嘻嘻\n哈哈哈\n啦啦啦\n么么么\n哒哒哒然后对文本用split("\n")方法进行切割,变成数组['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒哒'] //x 和 y 是做鼠标移动时回传出来的 let arr =['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒...

使用d3创建搭配foreignObject实现svg文本换行，出现文字不显示的问题

weixin_43170484的博客

06-06

2441

.append('xhtml:p') 对于非svg标签，需要添加xhtml:来标识，否则不能显示内容

svg text标签文字超出处理方案

qq_43370509的博客

07-06

2017

svg text标签特殊处理方式

java图片处理，文字自动换行

会跑的仓鼠

01-27

2733

BufferedImage - Graphics2D 图片处理文字居中换行util /*** * * @param g Graphics2D * @param font Font * @param text 文本内容 * @param x 起始点X轴坐标 * @param y 起始点Y轴坐标 * @param maxWidth 文字最大长度 */ public static void content(Graphics2D g , Font font , String text

前端使用mathJax.js展示数学公式无法自动换行的问题

qq_32429257的博客

03-12

2384

前言: 最近使用的一款插件math.js按照正常格式展示各种公式，途中遇到不能自动换行的困扰，一步步排查得知标签class名为mjx-chtml的设置强制不换行white-space: nowrap，那么只需要在你所引用的CSS文件中加一行样式即可话不多说，上代码全局引用并设置mathJax messageStyle是公式转化的进度，会显示的页面左下角，用户体验不是很好，SO，我隐藏掉...

css文本换行_svg中的文字显示——换行与截断

weixin_39821035的博客

11-29

832

svg对于文字处理的支持比较弱，无法像 DOM 元素直接实现换行与截断。最近在做的项目需要对不同长短的文字进行自适应的显示，所以，对svg中文字换行与截断的方法进行一下汇总。1. 用foreignObject包裹 DOM 元素，利用 DOM 的文本布局能力。[1]<svg xmlns="http://www.w3.org/2000/svg"> <foreignObject w...