Text 为什么文本总是以画布为中心
加载SVG并将其呈现到画布时,路径组中包含的文本始终居中。在下面的示例中,文本应放在左上角 SVG:Text 为什么文本总是以画布为中心,text,svg,fabricjs,Text,Svg,Fabricjs,加载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.w
<?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"
width="269.29px" height="269.29px" 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>
fabric.loadSVGFromURL(uri, function (svg, options) {
var group = new fabric.PathGroup(svg, options);
canvas.add(group);
});
路径组中的任何矩形、圆形等都将按预期显示。那么为什么我的文本没有正确显示呢 我没有使用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中的渲染会误解文本元素的翻译。下面是一个小提琴,它描述了问题:文本应该在红方块内,但已关闭。黑色方块用于确保使用x和y属性在路径组中的绝对定位按预期工作。fabric.js似乎不支持文本锚属性,请打开一个票证