为啥文本总是以画布为中心

Posted 2023-03-25

【中文标题】为啥文本总是以画布为中心

【英文标题】：why is text always centered to canvas为什么文本总是以画布为中心

【发布时间】：2012-10-13 21:08:12

【问题描述】：

加载 SVG 并将其渲染到画布时，路径组中包含的文本始终居中。在下面的示例中，文本应放在左上角。

SVG：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 269.29 269.29" xml:space="preserve">
<text transform="matrix(1 0 0 1 7.5107 14.2222)" font-family="Arial" font-size="12">Text in the corner</text>
</svg>

JS：

fabric.loadSVGFromURL(uri, function (svg, options) 
            var group = new fabric.PathGroup(svg, options);
            canvas.add(group);
        );

路径组中的任何矩形、圆形等都将按预期显示。那么为什么我的文字没有正确显示呢？

【参考方案1】：

我没有使用过fabric.js，但您可能缺少x 和y 属性。另外，添加text-anchor="start"，这样更容易定位：

<text transform="matrix(1 0 0 1 7.5107 14.2222)" font-family="Arial" font-size="12" text-anchor="start" x="0" y="0">Text in the corner</text>

【讨论】：

请注意，x 和 y 都默认为 0，所以如果这是您想要的，那么您不需要指定这些属性。

但是 OP 正在通过 fabric.js 从 SVG 转换为画布，这可能不是根据规范呈现的（只是一个理论）。

设置文本锚并不能解决我的问题。我怀疑 fabric.js 中的渲染误解了文本元素的翻译。

这里有一个描述问题的小提琴：jsfiddle.net/YA93m/1 文本应该在红色方块内，但已关闭。黑色方块用于确保使用 x 和 y 属性在 PathGroup 中的绝对定位按预期工作。

fabric.js 好像不支持 text-anchor 属性，开票github.com/kangax/fabric.js/issues