텍스트가 항상 캔버스 중앙에 배치되는 이유

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

상관 RECT, 서클 등 경로 그룹 내에 표시 될 것이다. 그렇다면 텍스트가 제대로 표시되지 않는 이유는 무엇입니까?

출처

2012-10-23 Franatique

fabric.js를 사용하지 않았지만 x 및 y 속성이 누락되었을 수 있습니다. 0 Y 모두 기본 및 X

<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

주, 그래서 만약 당신이 원하는 당신은 이러한 특성을 지정할 필요가 없습니다 : 또한, text-anchor="start"이 때문에 위치에 쉽게 추가 할 수 있습니다. –

하지만 OP는 SVG에서 캔버스로 fabric.js를 통해 변환 중이며, 이는 spec (단지 이론)에 따라 렌더링되지 않을 수 있습니다. – Duopixel

텍스트 앵커를 설정해도 문제가 해결되지 않습니다. fabric.js의 렌더링이 텍스트 요소의 번역을 오해 한 것 같습니다. – Franatique

텍스트가 항상 캔버스 중앙에 배치되는 이유

답변

관련 문제