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

Question

我正在使用以下内容加载 SVG

fabric.loadSVGFromURL

但是，当加载到 Canvas 中时，SVG 中的文本会向上推，而不是按照生成 SVG 时设置的方式垂直对齐。

svg代码如下:

<?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>

链接到浏览器中的结果:https://db.tt/A2VCCfhm

加载到 Canvas 时链接到结果:https://db.tt/RqNeO3Ku

Answer 1

我不知道你是否是 github 上的@rocknpivot。 根据最新版本 FabricJs 的记录，这个对齐问题已经解决。 2014 年 11 月 5 日修正了 1/4 字体大小的错位。 无论如何，在您发布的问题中，用户可以看到用特定字体呈现的美丽的“K”字母。 您发布的 SVG 中不存在该字体，因此该 svg 永远不会像您的屏幕截图中那样呈现。

链接: http://jsfiddle.net/asturur/vwq7h766/4/

无论如何，这里有一个更有效的示例。 您会看到稍微向左的偏移错误，但我认为自创建 fiddle 以来字体发生了一些变化，我没有更多的原始文件，无法重现它。

这是工作 fiddle 的屏幕截图

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