Javascript Fabric JS解析器的SVG文本对齐问题
我使用以下命令加载SVGJavascript Fabric JS解析器的SVG文本对齐问题,javascript,svg,fabricjs,Javascript,Svg,Fabricjs,我使用以下命令加载SVG fabric.loadSVGFromURL 但是,当加载到画布时,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 sv
fabric.loadSVGFromURL
但是,当加载到画布时,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>
K
链接到浏览器中的结果:
加载到画布时指向结果的链接:我不知道您是否是github上的@rocknpivot。 对于使用最新版本FabricJs的记录,此对齐问题已经解决。 这是2014年11月5日纠正的字体大小1/4的错位。 无论如何,在您发布的问题中,用户可以看到一个用特定字体呈现的漂亮的“K”字母。 您发布的SVG中不存在该字体,因此该SVG将永远不会像您的屏幕截图中那样呈现
链接:
这里有一个更有效的例子。
您会看到一个轻微的左偏移错误,但我认为自从创建小提琴以来,字体发生了一些变化,我没有更多的原始文件,无法复制它
这里是工作小提琴的屏幕截图
是的,是我,忘了在这里更新了!再次感谢您的帮助,我可以确认一切正常