javascript - 请问SVG text怎么设置字体大小？怎么换行？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 请问SVG text怎么设置字体大小？怎么换行？

伊谢尔伦 2017-04-11 12:06:07

[JavaScript讨论组]

996

代码如下：


     
     
     ${text}


怎样设置最后一个 text 容器的字体大小以及能根据文字长度进行换行处理？

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(3)

PHP中文网2017-04-11 12:08:07 3楼

字体大小最好通过css来设置。

至于一般所期望的换行，当前标准的 svg 做不到。不过，可以嵌入html来解决。

参考：svg文字自动换行

赞 +0

添加回复

巴扎黑2017-04-11 12:08:07 2楼

昨天刚做了一个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.width; 
var lastSubStrIndex= 0; 
for(let i=0;i<str.length;i++){ 
    lineWidth+=ctx.measureText(str[i]).width; 
    if(lineWidth>canvasWidth/8*5){
        ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
        initY+=lineHeight;
        lineWidth=0;
        lastSubStrIndex=i;
    } 
    if(i==str.length-1){
        ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
    }
}

}

赞 +0

添加回复

大家讲道理2017-04-11 12:08:07 1楼

没有接触过SVG得相关库，就原生SVG来说。
换行通常是通过tspan标签来实现的。
这个标签通常是嵌套在text之中，拥有者x、y、dx、dy四个和位置相关的基本属性。
x，y顾名思义就是相对于text标签起点的绝对定位
dx、dy则是相对于上一个tspan标签的相对定位