问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
代码如下：
&svg:svg width="${w}" height="${h}" id="${processId}"&
&svg:rect x="0" y="0" width="${w}" height="${h}" class="outer drag-start"/&
&svg:rect x="3" y="3" width="${w-6}" height="${h-6}" class="inner"/&
&svg:text text-anchor="middle" x="50%" y="50%" dominant-baseline="central"&${text}&/svg:text&
&/svg:svg&
怎样设置最后一个 text 容器的字体大小以及能根据文字长度进行换行处理？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
字体大小最好通过css来设置。
至于一般所期望的换行，当前标准的 svg 做不到。不过，可以嵌入html来解决。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
昨天刚做了一个Canvas绘制文本的项目，也遇到过这种问题在网上查到一个函数！你可以参考下这个函数的思路！
/*str:要绘制的字符串canvas:canvas对象initX:绘制字符串起始x坐标initY:绘制字符串起始y坐标lineHeight:字行高*/function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
var ctx = canvas.getContext("2d");
var lineWidth = 0;
var canvasWidth = c.
var lastSubStrIndex= 0;
for(let i=0;i&str.i++){
lineWidth+=ctx.measureText(str[i]).
if(lineWidth&canvasWidth/8*5){
ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
initY+=lineH
lineWidth=0;
lastSubStrIndex=i;
if(i==str.length-1){
ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
没有接触过SVG得相关库，就原生SVG来说。
换行通常是通过tspan标签来实现的。
这个标签通常是嵌套在text之中，拥有者x、y、dx、dy四个和位置相关的基本属性。x，y顾名思义就是相对于text标签起点的绝对定位dx、dy则是相对于上一个tspan标签的相对定位
一般而言，每一行文字就是一个tspan标签，它们的属性要么就是dy = (行高)或者就是y = (行高 * 第几行)。你看情况选择吧。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
采纳了 的方案，代码如下
&svg xmlns="http://www.w3.org/2000/svg" style="outline: 1margin: 50"&
&foreignObject x="20" y="0" width="150" height="200" style="outline: 1"&
&p xmlns="http://www.w3.org/1999/xhtml"&Text goes here, Text goes here, Text goes here, Text goes here&/p&
&/foreignObject&
&text x="20" y="20"&Your SVG viewer cannot display html.&/text&
效果图如下：
这是目前为止我自己发现的最优解决方案
缺点是IE11不兼容（其他版本未测试），chrome 55，firefox 51支持（其他版本未测试）
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：2679人阅读
web前端（63）
//canvas文字换行
function write_text_other_line_auto(ctx,font,align,color,text,x,y,line_count,line_height,text_indent){
ctx.font =
ctx.textAlign =
ctx.fillStyle =
var row_count = text.length/line_
var first_row_line_
var x1,y1;
for(var i=0;i&=row_i++){
ctx.fillText(text.substring(0,(line_count*(i+1)-text_indent)),x+(text_indent*26),y+(line_height*i));
first_row_line_count = (line_count*(i+1)-text_indent);
ctx.fillText(text.substring(line_count*(i-1)+first_row_line_count,first_row_line_count+line_count*i),x,y+(line_height*i));
y1 = y+(line_height*i);
return y1;
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：76137次
积分：1902
积分：1902
排名：千里之外
原创：113篇
转载：10篇
评论：21条
阅读：3391
阅读：9421
(2)(1)(1)(3)(7)(2)(6)(1)(7)(5)(2)(2)(3)(2)(11)(7)(3)(4)(5)(2)(12)(12)(6)(14)(3)Android 绘制文字换行问题 -
- ITeye博客
博客分类：
在绘制文字时，如果绘制内容的实际长度大于View的宽度，那么字符将在一行绘制，超出部分不显示。由于绘制函数onDraw没有对换行做逻辑处理，所以超出屏幕的部分便不可见了。如果还是想使用Canvas.drawText函数，那么需要对字符串做换行判断，然后分别绘制各行的字符串。看到一个简单的可行性方法，在此贴出代码：
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
TextPaint textPaint = new TextPaint();
textPaint.setARGB(0xFF, 0, 0, 0);
textPaint.setTextSize(14.0F);
String aboutTheGame = "ABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCDABCD";
StaticLayout layout = new StaticLayout(aboutTheGame, textPaint,
getWindowManager().getDefaultDisplay().getWidth() - 4,
Alignment.ALIGN_NORMAL, 1.0F, 0.0F, true);
canvas.translate(2, 0);
layout.draw(canvas);
DynamicLayout dynamicLayout = new DynamicLayout(aboutTheGame,
textPaint,
getWindowManager().getDefaultDisplay().getWidth() - 4,
Alignment.ALIGN_NORMAL, 1.0F, 0.0F, true);
canvas.translate(2, 80);
dynamicLayout.draw(canvas);
此方法可以简单实现换行，但是效果有点瑕疵，尤其中文字符串；
主要是利用StaticLayout或者DynamicLayout的draw方法来完成换行操作；
多说一句：如果想深入一点了解这个问题，还是看源码来的快！：）
wangleyiang
浏览: 103685 次
为什么我的TestHall里面看不到RomeA RomeB R ...
uyerp 写道这样的话，只能将插件的元素显示到Hall中。有 ...
这样的话，只能将插件的元素显示到Hall中。有什么办法能在不安 ...
提高文学修养 写道不好意思，有时间尝试一下，谢谢！有问题提出来 ...
不好意思，有时间尝试一下，谢谢！1641人阅读
html5-canvas（3）
转载请注明出处：
　　本文介绍怎么解决canvas绘图过程中，drawText的换行问题，先看一个大家平时在canvas绘制文本都会遇到的问题：
　　一个150*100的canvas画布，加个边框明显边界
id="canvas" style="border:solid 1" width="200px" height="100px"&&
我们先来看fillText()方法，strokeText()方法同理
var c=document.getElementById("canvas")
var ctx=c.getContext("2d")
ctx.fillStyle="#E992B9"
ctx.lineWidth=1
var str = "假如生活欺骗了你，请不要悲伤！thank you!"
ctx.fillText(str,0,20)
可以看到fillText()在固宽的canvas中，字数过多的时候，并不会自动换行，我们可以增加canvas本身的宽度，但这不是解决问题的根本方法。还记得之前介绍canvas基本api的时候，有一个函数，
context.measureText(text)
这个函数可以测量字体的宽高度，那就好办了，我们计算好我们字符串的长度加上一个大概的宽度，基本上可以处理这种换行的问题了。
下面看具体实现方法：
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#E992B9";
ctx.lineWidth=1;
var str = "假如生活欺骗了你，请不要悲伤！thank you!"
var lineWidth = 0;
var canvasWidth = c.
var initHeight=15;
var lastSubStrIndex= 0;
for(let i=0;i&str.i++){
lineWidth+=ctx.measureText(str[i]).
if(lineWidth&canvasWidth){
ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);
initHeight+=20;
lineWidth=0;
lastSubStrIndex=i;
if(i==str.length-1){
ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight);
见效果图：
算法：计算字符串str里面每个字符的宽度的和lineWidth，如果大于canvas的宽度，就截取这部分进行绘制，然后重置lineWidth，保存开始截取的最后的索引，当循环变量i为最后一个字符的时候，直接绘制剩余部分。
接下来：我们封装成一个方法，方便以后直接调用：
function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
var ctx = canvas.getContext("2d");
var lineWidth = 0;
var canvasWidth = c.
var lastSubStrIndex= 0;
for(let i=0;i&str.i++){
lineWidth+=ctx.measureText(str[i]).
if(lineWidth&canvasWidth-initX){
ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
initY+=lineH
lineWidth=0;
lastSubStrIndex=i;
if(i==str.length-1){
ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：24781次
排名：千里之外
原创：13篇
(1)(1)(5)(6)Canvas 自定义文字绘图 - Canvas 教程
&nbsp / &nbsp
&nbsp / &nbsp Canvas 自定义文字绘图
Canvas 自定义文字绘图
监听 mousemove mousedown mouseup mouseout dblclick 等鼠标事件来实现在 Canvas 上自定义文字绘图，通过获取鼠标坐标位置改变、旋转文本，还可以加快鼠标的移动速度来改变文本的大小。
核心 Javascript Coce :
通过获取鼠标当前在 Canvas 上的坐标到移动后结束时的坐标来改变绘制文本字体大小，会产生一种移动速度越快，字体越大的效果。
//决定绘制文本字体大小function distance(pt, pt2){
var xs = 0;
var ys = 0;
xs = pt2.x - pt.x;
xs = xs * xs;
ys = pt2.y - pt.y;
ys = ys * ys;
//返回正确舍入的一个double值的正平方根
return Math.sqrt( xs + ys );}
快捷键（PC）
快捷键（Mac）
退出全屏编辑
删除光标右侧内容
Ctrl+A (PC)
Cmd+A (Mac)
Ctrl+K (Mac)
删除光标右侧整行
Ctrl+D (PC)
Cmd+D (Mac)
删除光标所在行，包括换行符
Cmd+Backspace (Mac)
删除光标左侧部分内容
Cmd+Delete (Mac)
删除光标右部分内容
Ctrl+Z (PC)
Cmd+Z (Mac)
Ctrl+Y (PC)
Shift+Cmd+Z (Mac), Cmd+Y (Mac)
Alt+U (PC)
Shift+Cmd+U (Mac)
撤销最后的修改，如果没有，光标将移动到文档开始处
Ctrl+Home (PC)
Cmd+Up (Mac), Cmd+Home (Mac)
光标将移动到文档开始处
Ctrl+End (PC)
Cmd+End (Mac), Cmd+Down (Mac)
光标将移动到文档结束处
Alt+Left (PC)
Ctrl+A (Mac)
将光标移动到该行起始位置，快速移动光标
Alt+Right (PC)
Ctrl+E (Mac)
将光标移动到该行结束位置，快速移动光标
将光标移动到该行的起始位置
Ctrl+Left (PC)
Alt+Left (Mac)
向左单位性地移动光标，快速移动光标
Ctrl+Right (PC)
Alt+Right (Mac)
向右单位性地移动光标，快速移动光标
Ctrl+Backspace (PC)
Alt+Backspace (Mac)
单位性删除光标左侧代码，快速删除代码
Ctrl+Delete (PC)
Ctrl+Alt+Backspace (Mac), Alt+Delete (Mac)
单位性删除光标右侧代码，快速删除代码
Ctrl+] (PC)
Cmd+] (Mac)
当前行缩进或选择一个缩进单位
Ctrl+[ (PC)
Cmd+[ (Mac)
取消缩进当前行或选择一个缩进单位
Ctrl+F (PC)
Cmd+F (Mac)
Ctrl+G (PC)
Cmd+G (Mac)
查找下一个（搜索内容时）
Shift+Ctrl+G (PC)
Shift+Cmd+G (Mac)
查找上一个（搜索内容时）
Shift+Ctrl+F (PC)
Cmd+Option+F (Mac)
Shift+Ctrl+R (PC)
Shift+Cmd+Option+F (Mac)
Alt+F (PC)
Alt+F (Mac)
持续搜索，Enter 查找下一个，Shift+Enter 反向查找上一个
Alt+Q (PC)
Alt+Q (Mac)
学习 Canvas 从注释开始，在这里你可以：阅读、修改、创作！
示例代码来源于网络！