簡體   English   中英

Fabric JS解析器的SVG文本對齊問題

[英]SVG text alignment issues with Fabric JS parser

我正在使用以下方法加載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 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

加載到畫布時鏈接到結果: https : //db.tt/RqNeO3Ku

我不知道你是否在github上是@rocknpivot。 僅針對FabricJs最新版本的記錄,此對齊問題已解決。 這是2014年11月5日糾正的1/4字體大小的不對齊。無論如何,在您發布的問題中,用戶都可以看到使用特定字體呈現的beautyfull“ K”字母。 該字體在您發布的SVG中不存在,因此該svg將永遠不會像您的屏幕截圖中那樣呈現。

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

無論如何,這是一個更有效的示例。 您會看到一個稍微偏左的偏移錯誤,但是自從創建小提琴以來,我認為字體發生了一些變化,我沒有更多的原始文件,無法重現。

這是工作提琴的屏幕截圖

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM