2012-05-06 16 views
15

Tôi đang sử dụng FabricJS và tôi gặp phải một vấn đề với màn hình hiển thị của SVG của tôi trong vải:Issue với màn hình SVG/render trong Fabric.js

  • kết quả sẽ được hiển thị bên ngoài hộp lựa chọn của fabricJS (do một bản dịch?)
  • các neo của vùng chọn biến mất sau một phép biến đổi và sau đó không thể tìm thấy chúng.

Đây là một ảnh chụp màn hình: enter image description here

Tôi đang sử dụng một sản lượng SVG của Potrace và tôi nghĩ rằng đó là nguồn gốc của vấn đề của tôi.
Đây là mã của SVG: SVG code in pastebin
Bạn có thể kiểm tra nó bằng FabricJS trên trang này: FabricJS Kitchensing example.
Chỉ cần dán mã SVG vào khu vực "Tải SVG", sau đó thay đổi kích thước và xoay hộp mục để hiển thị SVG.

Bạn có biết phần mã SVG của tôi hoặc phần mã fabricjS gây ra sự cố không? Nếu có, tôi có thể tự thay đổi nó một cách dễ dàng không? Nếu không, liệu có ai có thể sửa chữa hoặc xác định sai lầm có thể xảy ra không?

Cảm ơn bạn rất nhiều vì sự giúp đỡ của bạn.

EDIT: dường như, FabricJS không thích dòng này của SVG:

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

Và đặc biệt hơn các dịch và quy mô các thuộc tính ... Làm thế nào để sửa chữa nó?

EDIT2: giải pháp là dịch và tỷ lệ tương ứng bằng (0,0) và (1,1) hoặc tốt hơn là chúng được áp dụng cho tọa độ.

Có ai có ý tưởng làm điều đó với tập lệnh Potrace hoặc JS không?

+2

Tôi đã tìm thấy giải pháp nhờ trình tối ưu hóa Peter Collingridge SVG: http://petercollingridge.appspot.com/ Nó áp dụng tất cả các biến đổi g của một tệp SVG! – Zorkzyd

+2

nếu bạn tìm thấy giải pháp, bạn có thể biến điều này thành câu hỏi tự trả lời. –

+0

@ Zorkzyd, xin cung cấp câu trả lời, tôi cũng phải đối mặt với cùng một vấn đề mà bạn đang phải đối mặt .... Tôi có thể giúp đỡ, để có được ra khỏi vấn đề này? – kuldipem

Trả lời

4

2 năm sau, fabricJs hiện có thể phân tích cú pháp hoàn toàn và quản lý SVG này. Chỉ cần dán mã SVG pasteBin cũ vào bản trình diễn kitchenSink và bạn sẽ thấy rằng nó tải tốt.

Rất nhiều cải tiến đã xảy ra gần đây trong khu vực phân tích cú pháp SVG. Tôi biết đây không phải là câu trả lời vì người dùng stackoverflow mong đợi, nhưng tốt hơn nên biết rằng để nghĩ rằng đây có thể vẫn là một vấn đề.