16

FabricJS を使用していますが、キャンバスでの SVG の表示に問題が発生しました。

  • 結果はfabricJSの選択ボックスの外に表示されます（翻訳のため？）
  • 変換後に選択のアンカーが消え、元に戻すことができなくなります。

スクリーンショットは次のとおりです。 ここに画像の説明を入力

Potraceの出力 SVG を使用していますが、これが問題の原因だと思います。
SVGのコードは次のとおりです。 Pastebin 内のSVG コード
このページの FabricJS でテストできます: FabricJS Kitchensing example。
SVG のコードを [Load SVG] 領域に貼り付け、セクション ボックスのサイズを変更して回転させるだけで、SVG が表示されます。

問題の原因となっている SVG コードの一部または fabricjS コードの一部を知っていますか? その場合、自分で簡単に変更できますか? そうでない場合、誰かが修正したり、間違いを見つけたりすることは可能ですか?

ご助力ありがとうございます。

編集:どうやら、FabricJS は SVG のこの行が好きではありません:

<g transform="translate(0,648) scale(0.098780,-0.098780)" fill="#000000" stroke="none">

特に、translate 属性と scale 属性は…どうすれば修正できますか?

EDIT2:解決策は、変換とスケールがそれぞれ (0,0) と (1,1) に等しいか、座標に適用されることです。

Potrace や JS スクリプトでそれを行うアイデアはありますか?

4

1 に答える 1

4

2 年後、fabricJs はこの SVG を完全に解析および管理できるようになりました。古い pasteBin SVG コードを kitchenSink デモに貼り付けるだけで、正常に読み込まれることがわかります。

最近、SVG 解析領域で多くの改善が行われました。これはstackoverflowユーザーが期待する答えではないことはわかっていますが、これが問題である可能性があることを知っておくことをお勧めします。

于 2014-12-16T09:24:06.330 に答える