0

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

パスグループ内の四角形、円などは、期待どおりに表示されます。では、テキストが正しく表示されないのはなぜですか?

4

1 に答える 1

0

私は fabric.js を使用していませんが、おそらくxandy属性が欠落しています。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-24T01:01:01.230 に答える