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

Question

代码如下：

<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 容器的字体大小以及能根据文字长度进行换行处理？

Answer 1

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

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

参考：svg文字自动换行

Answer 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);
    }
}

}

Answer 3

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

一般而言，每一行文字就是一个tspan标签，它们的属性要么就是dy = (行高)或者就是y = (行高 * 第几行)。你看情况选择吧。

Answer 4

采纳了@hyule 的方案，代码如下

<svg xmlns="http://www.w3.org/2000/svg" style="outline: 1px solid red;margin: 50px;">
    <switch>
        <foreignObject x="20" y="0" width="150" height="200" style="outline: 1px solid blue;">
            <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>
    </switch>
</svg>
        
        

效果图如下：

这是目前为止我自己发现的最优解决方案

缺点是IE11不兼容（其他版本未测试），chrome 55，firefox 51支持（其他版本未测试）

Answer 5

有一个font-size属性：
<svg width="32" height="32" version="1.1" xmlns="http://www.w3.org/2000/svg&quot;>
<text x="5" y="25" fill="red" font-size="30">A</text>
</svg>