Snap.svg so với Svg.js [đã đóng cửa]

Tôi đã cố gắng tìm một thư viện SVG thích hợp cho các trình duyệt hiện đại. Mục tiêu của tôi là quyết định, thư viện nào phù hợp để tạo trình soạn thảo SVG trực tuyến đơn giản với vd. chỉnh sửa văn bản và đường dẫn và cắt văn bản bằng đường dẫn.

Tôi tìm thấy hai thư viện, mà có thể phù hợp: Snap.svg và Svg.js .

SNAP.SVG

Github: https://github.com/adobe-webplatform/Snap.svg Dòng
mã nguồn: 6925 Github Stars: 3445
Doc: http://snapsvg.io/docs/
Bắt đầu: http://snapsvg.io/start /
Ví dụ về người mới bắt đầu ( JSBIN )

var draw = Snap(800, 600);

// create image
var image = draw.image('/images/shade.jpg', 
                       0, -150, 600, 600);

// create text
var text = draw.text(0,120, 'SNAP.SVG');

text.attr({
  fontFamily: 'Source Sans Pro',
  fontSize: 120,
  textAnchor: 'left'
});

// clip image with text
image.attr('clip-path', text);

SVG.JS

Github: https://github.com/svgdotjs/svg.js Các
dòng mã nguồn: 3604 Github Stars: 1905
Doc: https://svgdotjs.github.io/

Ví dụ dành cho người mới bắt đầu ( JSBIN ):

var draw = SVG('drawing');

// create image
var image = draw.image('/images/shade.jpg');
image.size(600, 600).y(-150);

// create text
var text = draw.text('SVG.JS').move(300, 0);
text.font({
  family: 'Source Sans Pro',
  size: 180,
  anchor: 'middle',
  leading: '1em'
});

// clip image with text
image.clipWith(text);

Cách sử dụng dường như là khá giống nhau.

Sự khác biệt chính giữa hai thư viện này là gì?

Tôi là người tạo ra SVG.js (vì vậy tôi cũng thiên vị :). Bạn sẽ phải thử cả hai và xem những gì phù hợp với bạn nhất. Với SVG.js, tôi cố gắng giữ cho cú pháp dựa trên javascript nhiều hơn để mọi thứ linh hoạt hơn, trong khi Snap thường sử dụng cú pháp dựa trên chuỗi. Điều này làm cho mã kết quả thường dễ đọc hơn trong SVG.js, điều mà tôi rõ ràng là thích. Hãy lấy một gradient làm ví dụ.

SNAP.SVG:

var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff");

paper.circle(50, 50, 40).attr({
  fill: g
});

SVG.JS:

var g = draw.gradient('linear', function(stop) {
  stop.at(0, '#000')
  stop.at(0.25, '#f00')
  stop.at(1, '#fff')
})

draw.circle(80).center(50,50).fill(g)

Cú pháp Snap.svg ngắn gọn hơn một chút, mã SVG.js dễ đọc hơn. Vì vậy, nó thực sự là một vấn đề của hương vị.

Nói chung SVG.js hướng đối tượng hơn nhiều. Tất cả mọi thứ đều là một lớp, thậm chí xuống số và màu sắc và do đó có thể mở rộng. Do cấu trúc OO nên việc viết plugin và mở rộng các đối tượng hiện có ở bất kỳ cấp độ nào là cực kỳ dễ dàng .

Ban đầu tôi đã thử Snap vì nó có một trang web đẹp và tài liệu có vẻ tốt. Sau một số vấn đề mà tôi không thể giải thích, tôi quyết định thử SVG.js. Tôi không thể xác định tại sao, nhưng SVG.js có vẻ dễ viết hơn; trực quan hơn. Tôi không nói rằng Snap tệ, nhưng nó không phù hợp với phong cách của tôi và tài liệu có nội dung hơi thưa thớt.

Tôi không chắc bạn sẽ nhận được một câu trả lời thiếu khách quan, vì hầu hết mọi người sẽ có kinh nghiệm về điều này hay điều khác.

Vì cả hai về cơ bản đều là giao diện với thông số SVG cơ bản, bạn sẽ có thể thực hiện hầu hết mọi thứ với một trong hai, vì vậy tôi sẽ không lo lắng quá nhiều về việc chọn. Các giải pháp sẽ giống nhau, thay vì thấy sự khác biệt.

Tôi có nhiều kinh nghiệm hơn với Snap (rất thiên vị), nhưng nhìn vào tài liệu, ấn tượng của tôi sẽ là svg.js dường như có nhiều đường hơn một chút đối với một số khía cạnh như hoạt ảnh và văn bản, trong khi có thể Snap có nhiều thứ hơn một chút như Ma trận (mà tôi thấy rất hữu ích vì đôi khi tôi phải vật lộn với những thứ đó) và dường như hỗ trợ một số thứ bổ sung như phần tử cảm ứng (tôi nghi ngờ chúng có sẵn ở cả hai bằng cách nào đó và một phần phụ thuộc vào sự hỗ trợ của trình duyệt, nhưng những thứ như hỗ trợ cảm ứng có thể ngày càng trở nên quan trọng với svg).

Cuối cùng, tôi chỉ muốn viết mã bằng cái này hay cái khác và không lo lắng về nó. Tôi nghĩ nếu bạn hiểu SVG, bạn sẽ có thể hoán đổi giữa chúng tương đối dễ dàng nếu bạn cần.