使用SVG.js获取变换后文本包围盒时rbox()报错求助

问题说明 #

用SVG.js获取经过旋转、缩放的文本包围盒时，调用rbox()方法报错：TypeError: Cannot read properties of null (reading 'getBBox')，示例代码如下：

this.draw.attr({ width: 200, height: 200 });

const text = this.draw
    .text("some text is here")
    .attr({ x: 50, y: 50, transform: "rotate(45) scale(1.1 1.1)" });

const textbbox = text.rbox();
const textBorder = this.draw
    .rect(textbbox.w, textbbox.h)
    .attr({ fill: "none", "stroke-width": 1, stroke: "black" })
    .move(textbbox.x, textbbox.y);
return this.draw;

解决思路及代码 #

1. 改用SVG.js原生变换方法 #

直接通过attr()设置transform属性会导致SVG.js无法正确跟踪变换状态，改用框架提供的rotate()、scale()、move()方法来设置位置和变换，这样rbox()能正常计算包围盒：

this.draw.attr({ width: 200, height: 200 });

const text = this.draw
    .text("some text is here")
    .move(50, 50) // 替代x/y的attr设置
    .rotate(45)
    .scale(1.1);

const textbbox = text.rbox();
const textBorder = this.draw
    .rect(textbbox.w, textbbox.h)
    .attr({ fill: "none", "stroke-width": 1, stroke: "black" })
    .move(textbbox.x, textbbox.y);
return this.draw;

2. 确保元素渲染完成后调用rbox #

如果是异步场景，元素可能还没挂载到DOM就调用了rbox()，可以用requestAnimationFrame延迟执行：

this.draw.attr({ width: 200, height: 200 });

const text = this.draw
    .text("some text is here")
    .move(50, 50)
    .rotate(45)
    .scale(1.1);

requestAnimationFrame(() => {
    const textbbox = text.rbox();
    const textBorder = this.draw
        .rect(textbbox.w, textbbox.h)
        .attr({ fill: "none", "stroke-width": 1, stroke: "black" })
        .move(textbbox.x, textbbox.y);
});
return this.draw;

3. 适配SVG.js版本 #

如果用的是v3.x版本，rbox()默认基于SVG视口计算，若要基于父元素计算，可传入父元素作为参数：text.rbox(this.draw)。

内容的提问来源于stack exchange，提问作者Mat