Scripting SVG

Question

Tôi đang xem xét việc phát triển một trang web tương tự như stackoverflow, nhưng các câu trả lời cũng có thể bao gồm các bản vẽ (sơ đồ, trong trường hợp này). Tôi muốn có một khu vực ở dạng câu trả lời, nơi họ có thể làm cho sơ đồ này mà không yêu cầu các plugin đặc biệt, v.v.

1. Chúng ta có điểm SVG có hoặc nên có khối lượng quan trọng sớm (1-2 năm) thiết kế trang web nơi SVG chạy tập lệnh dưới dạng tính năng chính là hợp lý (nghĩa là yêu cầu trình duyệt Firefox hoặc trình duyệt tương thích SVG/AJAX khác)?
2. Một số tài nguyên tốt cho việc học tập kịch bản SVG nền tảng chéo (có khả năng trong javascript) là gì?

-Adam Davis

Answer 1

Thật không may, tôi không có câu trả lời, nhưng tôi có ba gợi ý cho các dự án mà bạn có thể xem.

Đầu tiên là Lively Kernel bởi Dan Ingalls (có, số Dan Ingalls) tại Sun Labs. Nó là một thực hiện của một thế giới ảo Smalltalk trong JavaScript trên đầu trang của SVG. Chính xác hơn, đó là việc thực hiện khung công tác Morphic GUI từ Squeak Smalltalk trong JavaScript bằng cách sử dụng SVG và một cổng (các phần của) Squeak Smalltalk trong JavaScript. Hoặc, nếu bạn không phải là Smalltalker và điều trên không có ý nghĩa với bạn: đó là Hệ điều hành, được viết bằng JavaScript với trình thông dịch JavaScript là CPU, SVG làm cạc đồ họa và trình duyệt làm máy vi tính.

Điều này cực kỳ hiệu quả khi nói đến JavaScript và SVG. Và chỉ có hoàn toàn hoạt động trong Safari 3 và một phần trong Firefox 3, mặc dù cũng có một cổng thử nghiệm cho Internet Explorer.

Dự án thứ hai là cổng Processing.js của John Resig của ngôn ngữ hiển thị Xử lý đối với JavaScript. Nó sử dụng các yếu tố <canvas> thay vì SVG chính xác vì những vấn đề mà bạn đã đề cập. Tuy nhiên, điều này chỉ hoạt động trong Firefox 3.

Phần thứ ba là Real-Time 3D in JavaScript bởi Dưa chua vô dụng. Nó sử dụng chỉ JavaScript, DOM và CSS và không SVG hoặc <canvas> hoặc Flash hoặc bất kỳ thứ gì. Và nó có thể di chuyển đến hầu hết mọi trình duyệt, bao gồm cả Internet Explorer 7 trở lên. Làm 2D sẽ dễ dàng hơn thế này.

Giữa ba dự án này, bạn sẽ có thể tìm thấy một số cảm hứng và tìm một số người đã cố gắng đẩy phong bì bằng JavaScript và SVG hoặc JavaScript và Đồ họa và có thể cho bạn biết những gì hiệu quả và những gì không.

Kết luận: làm qua trình duyệt SVG hoặc qua trình duyệt <canvas> là gần như không thể, nhưng với một chút điên cuồng, đồ họa qua trình duyệt mà không cần SVG hoặc <canvas> là có thể.

Answer 2

1/lẽ không bao giờ - nếu IE muốn thêm nó, sau đó tôi sẽ phải mặc dù nó đã có thể làm như vậy bây giờ; nhưng có cách giải quyết bằng cách sử dụng SilverLight và Gecko để cung cấp hiển thị. Mặt khác, có sẵn các API đồ họa đa trình duyệt. Tôi đã sử dụng XULRunner và SVG, nhưng không có gì trên web mà phải phục vụ cho IE.

2/Hai tôi được gọi thường xuyên nhất là SVG pages on mozilla.org và điều này SVG DOM reference. Tất cả liên kết SVG của tôi đều có trên delicious

Có một trình chỉnh sửa hiện tại tại http://www.bpel4chor.org/editor/; cũng nếu tất cả các bạn muốn là sơ đồ nơi mà tất cả các cung nằm trên một mạng lưới, bạn có thể làm điều đó khá tốt bằng cách sử dụng divs và hình ảnh mà không có SVG. Hoặc bạn có thể chỉ cần lo-fi route

Answer 3

Như @jwmittag đã đề cập <canvas> là một tùy chọn.

Nó hoạt động trong Saffari và Firefox 3, Opera 9 và people are developing support for IE.

Bạn có thể dễ dàng nắm bắt các nhấp chuột được liên kết với công cụ và thuộc tính hiện tại. Vẽ lại canvas trên mỗi trang hiển thị.

Tôi vừa hoàn thành dự án bằng cách sử dụng <canvas> và đó là API đơn giản và rất mạnh mẽ để làm việc, đặc biệt nếu bạn đã từng thực hiện bất kỳ công việc OpenGL hoặc Cairo nào.

Chúc may mắn, nghe như một dự án thú vị.

Answer 4

Raphael trông giống như một sự lựa chọn thú vị về vấn đề đồ họa vector trên nhiều trình duyệt.

Answer 5

SVGWeb là tập lệnh bổ sung thêm khả năng SVG gần nguồn gốc vào IE bằng flash. Tất cả các trình duyệt chính khác đều hỗ trợ SVG.

http://code.google.com/p/svgweb/