2008-08-13 33 views
28

Tôi cần hiển thị một số đồ họa vector tương tác (đính kèm với trình lắng nghe DOM và xử lý sự kiện) trong trang web mà tôi đang làm việc. Có một khuyến cáo của W3C cho SVG mặc dù định dạng này vẫn không được nhận diện bởi sự hỗ trợ của Internet Explorer mà là một phải (đối với một trang web công cộng). IE xử lý VML mặc dù và thậm chí có thư viện javascript làm một số bản vẽ giống như canvas tùy thuộc vào trình duyệt (SVG so với VML) - excanvas, GFX of Dojo Toolkit và hơn thế nữa. Điều đó sẽ được tốt đẹp và chấp nhận được mặc dù không ai trong số họ có thể hiển thị một hình ảnh SVG từ đánh dấu nhất định.Hiển thị đồ họa véc tơ trong một trình duyệt

Vậy câu hỏi thực sự bao gồm một số phần:

  1. Có bất kỳ qua trình duyệt Javascript thư viện mà hiển thị đồ họa vector từ đánh dấu nhất định (không bắt buộc SVG) và cung cấp tính sẵn sàng để đính kèm vào các sự kiện DOM?
  2. Nếu không có, công nghệ nhúng nào trong số những công nghệ nhúng trình duyệt nhất sẽ thích hợp nhất để thực hiện một tác vụ như vậy? Tôi có thể chọn từ Flex/Flash, Java applet. Silverlight không phải là một lựa chọn vì Windows lock-in.

[EDIT] Cảm ơn tất cả các nhận xét/đề xuất của bạn. Dưới đây chỉ là một số ghi chú/kết luận ngẫu nhiên của tôi về vấn đề này:

  • Mức độ tương tác tôi cần là khả năng phát hiện sự kiện DOM trên hình ảnh vectơ đang được hiển thị - di chuột, di chuột, v.v ... và khả năng phản ứng trên chúng như thay đổi màu nền, hiển thị hộp thoại, vv
  • Ý tưởng gắn bó với định dạng SVG khá tốt vì nó có nguồn gốc trên nhiều trình duyệt ngoại trừ trình duyệt phổ biến nhất - IE. Sau khi một số thử nghiệm với hiển thị SVG động tôi nhận ra rằng phiên bản IE 7 là vấn đề nhất. Có quá nhiều rắc rối vì trình duyệt không tương thích.
  • Bánh có vẻ là một khung Javascript tuyệt vời, mặc dù tôi không thể lấy các ví dụ hoạt động trên IE7.
  • Java Applet - Tôi thích ý tưởng đó nhiều nhất vì tôi mặc dù tôi có thể sử dụng thư viện Apache Batik, một trình kết xuất SVG chất lượng. Tuy nhiên, Batik là thư viện rất lớn và tôi không thể đủ khả năng triển khai một applet có trọng lượng vài megabyte.
  • Tôi quyết định gắn bó với tùy chọn Flex. Tôi tìm thấy một thư viện đồ họa vector đẹp Degrafa. Nó sử dụng định dạng đánh dấu riêng của nó tuy nhiên nó nhận ra ký hiệu đường dẫn SVG, vì vậy trong trường hợp của tôi, nó sẽ khá dễ dàng để chuyển đổi SVG của tôi bằng XSLT hoặc chỉ phân tích cú pháp chúng.

[EDIT 2] Một số nhận xét khác xuất hiện. Tôi muốn làm rõ rằng bằng "Windows lock-in" tôi có nghĩa là tình hình mà Silverlight thường chạy trên Windows, cụ thể hơn, IE. Tôi nghi ngờ nó là một giải pháp được chấp nhận (ví dụ như Flash hoặc Java Applet) trên các hệ thống khác. Có, tôi không nghi ngờ rằng một có thể khởi chạy ứng dụng Silverlight trên bất kỳ hệ thống nào mặc dù tôi e rằng nó sẽ là quá nhiều nỗ lực cho một người dùng trung bình.

@Akira: Bạn có gặp bất kỳ sự cố nào với "trình kết xuất SVG" trên IE7 không? Tôi luôn bị lỗi Javascript.

Trả lời

1

Hãy xem phần tử Canvas mới đã được triển khai trong nhiều trình duyệt. Tôi cũng nghe nói rằng có một điều khiển ActiveX cho IE cũng thực hiện phần tử Canvas.

Cập nhật: Chờ đã, bạn đã nói điều đó. Tôi nên đọc toàn bộ câu hỏi lần sau!:)

0

Đi cho SVG - và chỉ yêu cầu người dùng nhận plugin ADOBE SVG cho IE.

Xem trang web tuyệt vời này - đó là một trang web Chính phủ Anh (dịch vụ công)

ELGIN

+1

Theo hiểu biết của tôi, Adobe sẽ ngừng hỗ trợ plugin của họ. –

0

IE hỗ trợ VML, nhưng không có gì khác không và đó là xấu xí. Microsoft tuyên bố rằng họ đã bỏ nó (với XAML mới và tất cả) nhưng nó vẫn là một phần của định dạng Office XML của họ (đó là cách Excel .xlsx hỗ trợ các bình luận, đủ kỳ lạ).

FX và tải thêm hỗ trợ phần tử Canvas mới. Nhiều người hỗ trợ SVG, nhưng cho công việc MS đang làm trên Silverlight tôi không thể nhìn thấy IE hỗ trợ SVG bất cứ lúc nào sớm.

Microsoft có nghĩa vụ cung cấp các plugin Silverlight không có hệ điều hành MS.

Tôi đã sử dụng Flex - nó khá tốt mặc dù sử dụng Eclipse. Bạn không cần phải mua các thành phần máy chủ Adobe cực kỳ đắt tiền để sử dụng Flex - nó có thể tiêu thụ các dịch vụ SOAP.

Công cụ dành cho Flex khá hợp lý và hầu hết mọi người đều có Flash.

0

Tôi không nghĩ SVG là lựa chọn tốt cho tương lai. Từ Wikipedia:

  • "Plugin phổ biến nhất của IE được sản xuất bởi Adobe Adobe, tuy nhiên, đang có kế hoạch rút sản phẩm này vào đầu năm 2009"
  • " ... Internet Explorer mà cũng sẽ không hỗ trợ SVG trong phiên bản sắp tới IE8 "
  • " ... tất cả đều có hỗ trợ không đầy đủ cho SVG 1.1 ... "
  • " Plugin Corel SVG Viewer đã từng được cung cấp từ Corel. Sự phát triển của nó đã dừng lại. "
+1

Không có định dạng vector nào hoạt động trên tất cả các trình duyệt, nhưng SVG có thể là * phần * của một giải pháp tốt. Chỉ cần nhận ra rằng nó sẽ không bao giờ làm việc trên IE (vì vậy bạn cần cái gì khác ở đó), và rằng không ai hỗ trợ nó hoàn toàn (như HTML, CSS, và mọi tiêu chuẩn web khác bao giờ), vì vậy bạn vẫn cần phải kiểm tra ở khắp mọi nơi. – Ken

9

Safari, Opera và Firefox đều hỗ trợ SVG nguyên bản (ví dụ: không có plugin) với các mức độ hoàn chỉnh và chính xác khác nhau, bao gồm khả năng viết svg từ javascript.

Ngoài ra còn có phần tử canvas hiện đang được chuẩn hóa trong html5 và cũng đã được hỗ trợ trong các trình duyệt ở trên (với các quirks khác nhau trong các trường hợp cạnh nhất định do những thay đổi tương đối gần đây trong bản nháp html5).

Thật không may, bất kỳ phương pháp tiếp cận dựa trên tiêu chuẩn nào đều bị phá hủy bởi sự cẩn trọng của IE về những gì đang xảy ra bên ngoài hệ sinh thái của chính nó, tuy nhiên có một số thư viện cố gắng chuyển canvas/svg thành VML (ngôn ngữ vector độc quyền của IE). iecanvas.

[Chỉnh sửa: Rất tiếc, tôi đã quên thư viện js yêu thích của tôi - Cake! mà có thể phân tích và hiển thị svg trong canvas, và tin hỗ trợ IE cũng]

[Tuy nhiên, một biên tập: Bánh thực sự có một demo làm những gì tôi nghĩ rằng bạn muốn làm]

6

Hãy nhìn vào các Raphael Javascript library. Đó là những ngày đầu nhưng nó trông rất hứa hẹn.

Tôi nhớ lộ trình IE có hỗ trợ SVG được liệt kê trong IE7.2.

Phụ thuộc vào mức độ tương tác bạn muốn?

0

Trong tất cả các khả năng bạn liệt kê, chỉ có một sự lạm dụng công nghệ hiện có (Javascript), không được hỗ trợ (SVG, phần tử Canvas) hoặc nhiều công việc (Java) là Flash. Nó được thiết kế như một gói đồ họa vector và tương thích với nhiều trình duyệt hơn SVG và thẻ canvas.

Lý do duy nhất tôi không chọn Flash trên tất cả các tùy chọn khác là nếu bạn đang nhắm vào trình duyệt trên thiết bị di động hoặc không có ngân sách cho gói Flash.

2

Bạn có thể làm rõ ý nghĩa của điều "Windows lock-in" với Silverlight không? Nó chạy trên Windows và MacIntel, và các phần vectơ chạy tốt trên Linux với plugin Moonlight.

Bạn có bị trục xuất bởi sự thiếu hỗ trợ của Amiga không?