Tôi đang làm việc trên một giao diện tương tác bằng cách sử dụng SVG và JavaScript / jQuery và tôi đang cố gắng quyết định giữa Raphael và jQuery SVG . Tôi muốn biết
Tôi không cần hỗ trợ VML / IE trong Raphael hoặc khả năng vẽ đồ thị của jQuery SVG. Tôi chủ yếu quan tâm đến cách thức thanh lịch nhất để tạo, tạo hiệu ứng và thao tác các mục riêng lẻ trên khung vẽ SVG.
Câu trả lời:
Gần đây tôi đã sử dụng cả Raphael và jQuery SVG - và đây là suy nghĩ của tôi:
Ưu điểm: một thư viện khởi động tốt, dễ dàng thực hiện RẤT NHIỀU thứ với SVG một cách nhanh chóng. Được viết và tài liệu tốt. Rất nhiều ví dụ và bản demo. Kiến trúc rất mở rộng. Tuyệt vời với hình ảnh động.
Nhược điểm: là một lớp trên đánh dấu SVG thực tế, gây khó khăn cho việc thực hiện những điều phức tạp hơn với SVG - chẳng hạn như nhóm (nó hỗ trợ Bộ, nhưng không phải nhóm). Không làm tốt w / chỉnh sửa các yếu tố đã tồn tại.
Ưu điểm: một plugin jquery, nếu bạn đang sử dụng jQuery. Được viết và tài liệu tốt. Rất nhiều ví dụ và bản demo. Hỗ trợ hầu hết các yếu tố SVG, cho phép truy cập tự nhiên vào các yếu tố
Nhược điểm: kiến trúc không thể mở rộng như Raphael. Một số điều có thể được ghi lại tốt hơn (như cấu hình của phần tử SVG). Không làm tốt w / chỉnh sửa các yếu tố đã tồn tại. Dựa vào ngữ nghĩa SVG cho hoạt hình - điều đó không tuyệt vời lắm.
SnapSVG là sự kế thừa của Raphael. Nó chỉ được hỗ trợ trong các trình duyệt hỗ trợ SVG và hỗ trợ hầu hết tất cả các tính năng của SVG.
Nếu bạn đang làm một cái gì đó nhanh chóng và dễ dàng, Raphael là một lựa chọn dễ dàng. Nếu bạn định làm một cái gì đó phức tạp hơn, tôi đã chọn sử dụng jQuery SVG vì tôi có thể thao tác đánh dấu thực tế dễ dàng hơn đáng kể so với Raphael. Và nếu bạn muốn một giải pháp không phải jQuery thì SnapSVG là một lựa chọn tốt.
Đối với hậu thế, tôi muốn lưu ý rằng cuối cùng tôi đã chọn Raphael, vì API sạch và hỗ trợ IE "miễn phí" và cũng vì sự phát triển tích cực có vẻ đầy hứa hẹn (ví dụ: hỗ trợ sự kiện chỉ được thêm vào 0,7). Tuy nhiên, tôi sẽ không trả lời câu hỏi và tôi vẫn muốn nghe về trải nghiệm của người khác khi sử dụng thư viện Javascript + SVG.
Tôi là một fan hâm mộ lớn của Raphael và đà phát triển dường như đang phát triển mạnh mẽ (phiên bản 0.85 đã được phát hành vào cuối tuần trước). Một điểm cộng lớn nữa là nhà phát triển của nó, Dmitry Baranovskiy , hiện đang làm việc với một plugin biểu đồ Raphael, g.raphael , trông giống như hình dạng của nó khá lắt léo (có một vài mẫu đầu ra từ các phiên bản đầu tiên trên Flickr ) .
Tuy nhiên, chỉ cần ném một ứng cử viên có thể khác vào hỗn hợp thư viện SVG, Web SVG của Google trông thực sự rất hứa hẹn (mặc dù tôi không phải là một fan hâm mộ lớn của Flash, nó sử dụng để kết xuất trong các trình duyệt không tuân thủ SVG). Có lẽ là một để xem, đặc biệt là với hội nghị SVG Open sắp tới .
Raphael chắc chắn dễ dàng hơn để thiết lập và bắt đầu, nhưng lưu ý rằng có những cách thể hiện mọi thứ trong SVG mà không thể có trong Raphael. Như đã nói ở trên không có "nhóm". Điều này ngụ ý rằng bạn không thể thực hiện các lớp Biến đổi tọa độ. Thay vào đó chỉ có một biến đổi tọa độ có sẵn.
Nếu thiết kế của bạn phụ thuộc vào các phép biến đổi tọa độ lồng nhau, Raphael không dành cho bạn.
Oh Raphael đã di chuyển đáng kể từ tháng Sáu. Có một thư viện biểu đồ mới có thể làm việc với nó và chúng rất bắt mắt. Raphael cũng hỗ trợ cú pháp đường dẫn SVG đầy đủ và được kết hợp các phương thức đường dẫn thực sự tiên tiến. Hãy xem 1.2.8+ tại trang web của tôi (phích cắm không biết xấu hổ) và sau đó truy cập vào trang web của Dmitry từ đó. http://www.irunmywebsite.com/raphael/raphaelsource.html
Tôi nghĩ rằng nó không hoàn toàn không liên quan nhưng bạn đã xem xét vải? một cái gì đó như Process JS có thể làm cho nó đơn giản hơn.
Bạn cũng nên xem qua Svgweb. Nó sử dụng flash để kết xuất svg trong IE và tùy chọn trên các trình duyệt khác (trong trường hợp nó hỗ trợ nhiều hơn trình duyệt).
Tôi sẽ bỏ phiếu của mình đằng sau Raphael - hỗ trợ nhiều trình duyệt, API sạch và các bản cập nhật nhất quán (cho đến nay) làm cho nó trở thành niềm vui khi sử dụng. Nó cũng chơi rất độc đáo với jQuery. Xử lý là mát mẻ, nhưng hữu ích hơn như là một bản demo cho các công cụ hiện tại.
Là người mới bắt đầu sử dụng Javascript, tôi thấy các mẫu Rapahel không dễ dàng như vậy, tôi khuyên bạn nên http://cancerbero.mbarreneche.com/raphaeltut , đây là một hướng dẫn từng bước thực sự.
Đối với những người không quan tâm đến IE6 / IE7, cùng một người đã viết Raphael đã xây dựng một công cụ svg dành riêng cho các trình duyệt hiện đại: Snap.svg .. họ có một trang web thực sự tốt với các tài liệu tốt: http://snapsvg.io
snap.svg không thể dễ dàng hơn để sử dụng ngay lập tức và có thể thao tác / cập nhật các SVG hiện có hoặc tạo các cái mới. Bạn có thể đọc nội dung này trên trang snap.io về nhưng đây là một cách nhanh chóng:
Nhược điểm
Ưu
Triển khai các tính năng đầy đủ của SVG như mặt nạ, cắt, mô hình, độ dốc đầy đủ, nhóm, v.v.
Khả năng hoạt động với các SVG hiện có: không cần phải tạo nội dung với Snap để nó hoạt động với Snap, cho phép bạn tạo nội dung bằng bất kỳ công cụ thiết kế phổ biến nào.
Hỗ trợ hoạt hình đầy đủ bằng cách sử dụng API JavaScript đơn giản, dễ thực hiện
Hoạt động với các chuỗi SVG (ví dụ: các tệp SVG được tải qua Ajax) mà không phải thực sự hiển thị chúng trước, tương tự như một thùng chứa tài nguyên hoặc bảng sprite.
kiểm tra xem nếu bạn quan tâm: http://snapsvg.io
Vì nó chưa được đề cập ở đây: Bạn cũng nên xem Dojox.drawing , cũng cung cấp khả năng vẽ SVG tốt. Nó có một bộ tính năng khá ấn tượng. Tôi mới bắt đầu một dự án với nó, nhưng dường như nó vượt trội hơn nhiều (ít nhất là về các tính năng) so với Raphael và JQuerySVG.
Bài thuyết trình này đã thuyết phục tôi sử dụng nó thay vì Raphael / JQuerySVG: http://www.sl slideshoware.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Tham khảo: http://dojotoolkit.org/reference-guide/dojox/index.html
Tham khảo về Dojocampus: http://docs.dojocampus.org/dojox/drawing
Tải xuống Dojo (bao gồm Dojox): http://dojotoolkit.org/doad/
Một thư viện javascript khác của Svg mà bạn có thể muốn xem là d3.js. http://d3js.org/
Tôi thích sử dụng RaphaelJS vì nó có khả năng đa trình duyệt tuyệt vời. Tuy nhiên, một số hiệu ứng SVG & VML không thể đạt được với RaphaelJS (độ dốc phức tạp ...).
Google cũng đã phát triển một thư viện của riêng mình để kích hoạt hỗ trợ SVG trong IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
Nếu bạn không cần hỗ trợ VML và IE8 thì hãy sử dụng Canvas (ví dụ PaperJS). Nhìn vào các bản demo IE10 mới nhất cho Windows 7. Họ có những hình ảnh động tuyệt vời trong Canvas. SVG không có khả năng làm bất cứ điều gì gần gũi với họ. Canvas tổng thể có sẵn ở tất cả các trình duyệt di động. SVG không hoạt động ở các phiên bản đầu của Android 2.0- 2.3 (như tôi biết)
Có, Canvas không thể mở rộng, nhưng nó nhanh đến mức bạn có thể vẽ lại toàn bộ canvas nhanh hơn sau đó trình duyệt có khả năng cuộn cổng xem.
Từ quan điểm của tôi, tối ưu hóa của Microsoft cung cấp phương tiện để sử dụng Canvas làm công cụ GDI thông thường và triển khai các ứng dụng đồ họa như chúng tôi hiện đang làm cho Windows.