爲什麼文本總是以畫布爲中心

加載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" 
    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>

JS：如預期

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

任何矩形，圓等的路徑組中將被顯示。那爲什麼我的文字顯示不正確？

來源

2012-10-23 Franatique

我還沒有使用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>

來源

2012-10-24 01:01:01 Duopixel

注意，X和Y的默認值都是0，所以如果這是你想要的，那麼你就不需要指定這些屬性。 –

但是OP通過fabric.js從SVG轉換爲canvas，這可能不是根據spec（僅僅是一個理論）渲染的。 – Duopixel

設置文本錨並不能解決我的問題。我懷疑fabric.js中的渲染誤解了文本元素的翻譯。 – Franatique

爲什麼文本總是以畫布爲中心

回答

相關問題