Fabric JS解析器的SVG文本对齐问题

Question

I am loading an SVG using the following

fabric.loadSVGFromURL

however when loaded into the canvas the text in the SVG is pushed up rather than be vertically aligned as set when producing the SVG.

The svg code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg version="1.1"
 id="Layer_1" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="62.8 -28.2 502.6 480"
 enable-background="new 62.8 -28.2 502.6 480" xml:space="preserve">
    <g id="Layer-border">
        <path id="border" fill="#363F5B" d="M62.8-28.2v480h502.6v-480H62.8L62.8-28.2z"/>
    </g>
    <g id="Layer-main">
        <rect id="main" x="72" y="-19.2" fill="#BF4D9C" width="484.9" height="463.1"/>
    </g>
    <g id="Layer-text">
        <text transform="matrix(1 0 0 1 79.5781 339.4394)" fill="#FFFFFF" font-family="'ApexLake-Regular'" font-size="427.7094">K</text>
    </g>
 </svg>

Link to result in browser: https://db.tt/A2VCCfhm

Link to result when loaded to canvas: https://db.tt/RqNeO3Ku

Answer 1

i don't know if you are @rocknpivot on github. Just for the records with the latest version of FabricJs, this alignment issue has been solved. It was a misalignment of 1/4 of font size corrected 5 November 2014. Anyway in the question you posted, user can see a beautyfull "K" letter rendered with a particular font. The font is not present in the SVG you posted, so this svg will never render as in your screenshot.

link: http://jsfiddle.net/asturur/vwq7h766/4/

Here is a more working example anyway. You see a slightly left offset error, but i think something is changed in the font since the creation of the fiddle, i have no more the original files i cannot reproduce it.

Here a screenshot of the working fiddle

https://cloud.githubusercontent.com/assets/1194048/4953012/586b3af8-667b-11e4-93ff-9542f5d61b3d.png