2015-02-06 32 views
-2

夥計們,我在這裏遇到了一個非常神祕的問題。Fabricjs svg解析錯誤

我有一個SVG <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='263.342' height='132.29' viewBox='0 0 263.342 132.29'><path fill='#FFC55D' d='M148.718 39.53S152.442 0 199.442 0v57.604l-26.236-18.628-16.908 18.628-.467 42.678s-.99 18.658-20.113 18.658'/><path fill='#FEDBC8' d='M63.44 132.29c-44 0-46.084-38.09-45.903-44.62-1.45 0-11.837-1.268-11.837-9.974 0-13.785 11.74-11.97 11.74-11.97V55.567l-.644-24.077H63.44v100.8zM63.44 132.29c43 0 45.76-38.09 45.58-44.62 1.45 0 11.5-1.268 11.5-9.974 0-13.785-12.08-11.97-12.08-11.97V55.567l.995-24.077H63.44v100.8z'/><path fill='#1CA97E' d='M46.18 70.078c0 3.405-2.76 6.167-6.167 6.167-3.406 0-6.167-2.762-6.167-6.167 0-3.406 2.76-6.167 6.167-6.167 3.406 0 6.167 2.762 6.167 6.168M80.642 70.078c0 3.405 2.76 6.167 6.167 6.167 3.405 0 6.166-2.762 6.166-6.167 0-3.406-2.76-6.167-6.167-6.167s-6.168 2.762-6.168 6.168'/><path fill='#F37885' d='M49.263 99.49c0 8 6.356 14.196 14.196 14.196s14.196-6.195 14.196-14.195H49.263zM63.335 113.688c7.84 0 14.32-6.196 14.32-14.196H63.44'/><path fill='#78492F' d='M18.44 67.9V31.627s-11 1.995-11 7.98V61.37s4 6.53 11 6.53'/><path fill='#78492F' d='M74.44 9.49H14.62s2.54 13 8.888 13H.11s-2.72 14 18.863 14H74.44v-27zM108.44 31.626V20.562c0-5.985-4.88-10.07-8.21-11.07H71.21c-3.33 1-7.77 5.085-7.77 11.07v15.93h45V67.9s11-1.995 11-7.98V38.157s-5-6.53-11-6.53'/><path fill='#FEDBC8' d='M199.44 132.29c-42 0-44.34-36.73-44.164-43.028-1.398 0-11.287-1.224-11.287-9.62 0-13.293 11.45-11.544 11.45-11.544v-9.794l-.775-17.812h44.776v91.798z'/><path fill='#82A0D7' d='M183 72.296c0 3.284-2.663 5.946-5.947 5.946s-5.947-2.662-5.947-5.946 2.663-5.947 5.947-5.947S183 69.01 183 72.295'/><path fill='#F37885' d='M185.974 100.49c0 8 6.13 13.69 13.69 13.69s13.69-5.69 13.69-13.69h-27.38z'/><path fill='#FFC55D' d='M250.282 39.53S246.442 0 199.442 0v57.49h43.377l.466 42.736s.933 18.687 20.056 18.687M199.44 57.603V.233s-48.974-3.266-48.974 39.88c0 30.275 4.956 27.518 4.956 27.518l.32-10.494s16.66-2.798 16.66-14.925c5.863 7.695-1.96 15.393 27.04 15.393'/><path fill='#FEDBC8' d='M199.44 132.29c42 0 44.232-36.73 44.058-43.028 1.398 0 11.34-1.224 11.34-9.62 0-13.293-11.396-11.544-11.396-11.544v-9.794l.558-.813h-44.56v74.8z'/><path fill='#82A0D7' d='M216.232 72.296c0 3.284 2.663 5.946 5.947 5.946s5.946-2.662 5.946-5.946-2.663-5.947-5.947-5.947-5.948 2.662-5.948 5.946'/><path fill='#F37885' d='M199.44 114.18c7.563 0 13.913-5.688 13.913-13.688H199.44'/></svg>

而且一些代碼,這使得我的帆布SVG,使用fabricjs:

​​

所以我得到了這一點:

enter image description here

取而代之:

enter image description here

P.S.背景顏色可以 - 畫布的顏色。

幫助球員

+0

一次刪除一條工作路徑,直到你有一些只有破損的路徑。你可能應該儘量簡化路徑,這樣你就可以將測試用例變得非常簡單。 – 2015-02-06 11:19:27

+0

在Fabric中,SVG解析仍然是ummm。 https://github.com/kangax/fabric.js/issues/1055下面是已知工作和不工作的列表。還有一些很好的解決方法。最好的事情是發佈你的SVG並讓團隊在其上工作/排除故障。 – 2015-02-06 21:45:19

+0

svg解析不錯。 – AndreaBogazzi 2015-02-09 09:43:25

回答

2

所以這個svg工作正常。 你可能在試圖解析它時使用過一箇舊版本的fabricjs。出來的是一箇舊的「a」命令繪製錯誤。 如果你複製粘貼這個svg到fabricjs.com/kitchensink這是一個通用的演示/測試,你會發現它工作良好。 所以請下載最新版本的圖書館,你應該沒事