SVG ve JavaScript / jQuery kullanarak etkileşimli bir arayüz üzerinde çalışıyorum ve Raphael ile jQuery SVG arasında karar vermeye çalışıyorum . bilmek isterdim
Raphael'de VML / IE desteğine veya jQuery SVG'nin çizim yeteneklerine ihtiyacım yok. Öncelikle bir SVG tuvalinde tek tek öğeleri oluşturmanın, canlandırmanın ve manipüle etmenin en zarif yoluyla ilgileniyorum.
Yanıtlar:
Son zamanlarda hem Raphael hem de jQuery SVG'yi kullandım - ve düşüncelerim:
Artıları: iyi bir başlangıç kütüphanesi, SVG ile çok şey yapmak kolay. İyi yazılmış ve belgelenmiş. Birçok örnek ve Demolar. Genişletilebilir mimari. Animasyon ile harika.
Eksileri: gerçek SVG işaretlemesinin üzerinde bir katmandır, SVG ile gruplama gibi daha karmaşık şeyler yapmayı zorlaştırır (Grupları destekler, ancak grupları desteklemez). Zaten var olan öğelerin w / düzenleme yapmaz.
Artıları: jQuery kullanıyorsanız, bir jquery eklentisi. İyi yazılmış ve belgelenmiş. Çok sayıda örnek ve demo. Çoğu SVG elemanını destekler, elemanlara kolayca yerel erişim sağlar
Eksileri: mimarisi Raphael kadar genişletilemez. Bazı şeyler daha iyi belgelenebilir (SVG öğesinin yapılandırılması gibi). Zaten var olan öğelerin w / düzenleme yapmaz. Animasyon için SVG semantiğine dayanır - ki bu harika değildir.
SnapSVG, Raphael'in halefi. Yalnızca SVG özellikli tarayıcılarda desteklenir ve SVG'nin neredeyse tüm özelliklerini destekler.
Hızlı ve kolay bir şey yapıyorsanız, Raphael kolay bir seçimdir. Daha karmaşık bir şey yapacaksanız, jQuery SVG'yi seçtim çünkü gerçek işaretlemeyi Raphael'den daha kolay manipüle edebilirim. Ve jQuery olmayan bir çözüm istiyorsanız SnapSVG iyi bir seçenektir.
Gelecek nesiller için, temiz API ve "ücretsiz" IE desteği nedeniyle Raphael'i seçtiğimi ve ayrıca aktif geliştirme umut verici göründüğü (örneğin olay desteği sadece 0.7'de eklendi). Ancak, soruyu yanıtsız bırakacağım ve yine de Javascript + SVG kütüphanelerini kullanan başkalarının deneyimlerini duymak isterim.
Raphael'in büyük bir hayranıyım ve geliştirme ivmesi güçlü görünüyor (geçen hafta geç saat 0.85 yayınlandı). Bir başka büyük artı, geliştiricisi Dmitry Baranovskiy'nin şu anda oldukça kaygan olması için şekillendirilmesine benzeyen bir Raphael grafik eklentisi, g.raphael üzerinde çalışıyor olması ( Flickr'ın ilk sürümlerinden çıktıların birkaç örneği var ) .
Bununla birlikte, SVG kütüphane karışımına başka bir olası yarışmacı atmak için Google'ın SVG Web'i gerçekten çok umut verici görünüyor (SVG uyumlu olmayan tarayıcılarda oluşturmak için kullandığı Flash'ın büyük bir hayranı olmasam bile). Muhtemelen izlenmesi gereken, özellikle de yaklaşan SVG Open konferansı ile .
Raphael'in kurulması ve başlaması kesinlikle daha kolaydır, ancak SVG'de Raphael'de mümkün olmayan şeyleri ifade etmenin yolları olduğunu unutmayın. Yukarıda belirtildiği gibi "grup" yoktur. Bu, Koordinat Aktarımları katmanlarını uygulayamayacağınız anlamına gelir. Bunun yerine yalnızca bir koordinat dönüşümü vardır.
Tasarımınız iç içe geçmiş koordinat dönüşümlerine bağlıysa, Raphael sizin için değildir.
Ah Raphael Haziran ayından bu yana önemli ölçüde ilerledi. Onunla çalışabilecek yeni bir grafik kütüphanesi var ve bunlar çok dikkat çekici. Raphael ayrıca tam SVG yolu sözdizimini destekler ve gerçekten gelişmiş yol yöntemlerini kullanmaktadır. Gel benim sitemde 1.2.8+ (Utanmaz fiş) bakın ve oradan Dmitry siteye sıçrama. http://www.irunmywebsite.com/raphael/raphaelsource.html
Bence tamamen alakasız değil ama tuvali düşündün mü? Process JS gibi bir şey daha basit hale getirebilir.
Ayrıca svgweb'e de göz atmalısınız. IE'de ve isteğe bağlı olarak diğer tarayıcılarda (tarayıcının kendisinden daha fazlasını desteklediği durumlarda) svg'yi oluşturmak için flash kullanır.
Oyumu Raphael'in arkasına atacağım - çapraz tarayıcı desteği, temiz API ve tutarlı güncellemeler (şimdiye kadar) kullanımı bir zevk haline getiriyor. Çok jQuery ile çok güzel oynuyor. İşleme harika, ancak şu anda kanayan şeyler için bir demo olarak daha kullanışlı.
Bir Javascript acemi olarak, Rapahel örneklerini o kadar kolay bulmadım , gerçek bir Adım adım öğretici olan http://cancerbero.mbarreneche.com/raphaeltut'u öneriyorum .
IE6 / IE7'yi umursamayanlar için, Raphael'i yazan aynı adam özellikle modern tarayıcılar için bir svg motoru inşa etti: Snap.svg .. iyi dokümanlar ile gerçekten güzel bir site var: http://snapsvg.io
snap.svg, kutudan çıkar çıkmaz kolayca kullanılamaz ve mevcut SVG'leri değiştirebilir / güncelleyebilir veya yenilerini oluşturabilir. Bu bilgiyi snap.io hakkında sayfada okuyabilirsiniz, ancak hızlı bir çalışma:
Eksileri
Artıları
Maskeleme, kırpma, desenler, tam degradeler, gruplar ve daha fazlası gibi SVG'nin tüm özelliklerini uygular.
Mevcut SVG'lerle çalışabilme: Snap ile çalışması için içeriğin Snap ile oluşturulması gerekmez, böylece herhangi bir ortak tasarım aracıyla içerik oluşturmanıza olanak tanır.
Basit, uygulaması kolay bir JavaScript API'sı kullanarak tam animasyon desteği
Kaynak kapsayıcısına veya hareketli grafik sayfasına benzer şekilde, önce bunları oluşturmak zorunda kalmadan SVG dizeleriyle (örneğin, Ajax aracılığıyla yüklenen SVG dosyaları) çalışır.
ilgilenip ilgilenmediğinizi kontrol edin: http://snapsvg.io
Henüz burada bahsedilmediğinden: Ayrıca iyi SVG çizim yetenekleri de sağlayan Dojox.drawing'e de göz atmalısınız . Oldukça etkileyici özelliklere sahiptir. Sadece onunla bir proje başlatıyorum, ama bana öyle geliyor ki (en azından özellikler açısından) Raphael ve JQuerySVG'den çok daha üstün.
Bu sunum beni Raphael / JQuerySVG yerine kullanmaya ikna etti: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Referans: http://dojotoolkit.org/reference-guide/dojox/index.html
Dojocampus ile ilgili referans: http://docs.dojocampus.org/dojox/drawing
Dojo'yu indirin (Dojox dahil): http://dojotoolkit.org/download/
Bakmak isteyebileceğiniz başka bir svg javascript kütüphanesi d3.js'dir. http://d3js.org/
RaphaelJS kullanmayı tercih ediyorum çünkü harika çapraz tarayıcı yeteneklerine sahip. Ancak, bazı SVG ve VML efektleri RaphaelJS (karmaşık gradyanlar ...) ile elde edilemez.
Google, IE'de SVG desteğini etkinleştirmek için kendi kütüphanesini de geliştirdi: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
VML ve IE8 desteğine ihtiyacınız yoksa Canvas'ı kullanın (örneğin PaperJS). Windows 7 için en son IE10 demolarına bakın. Tuvalde inanılmaz animasyonlar var. SVG onlara yakın bir şey yapamaz. Genel Tuval, tüm mobil tarayıcılarda kullanılabilir. SVG, Android 2.0-2.3'ün ilk sürümlerinde çalışmıyor (bildiğim gibi)
Evet, Tuval ölçeklenebilir değildir, ancak o kadar hızlıdır ki, tuvalin tamamını daha hızlı bir şekilde yeniden görüntüleyebilmeniz için görüntüleme portunu kaydırmaya olanak tanır.
Benim bakış açımdan Microsoft'un optimizasyonları, Canvas'ı normal GDI motoru olarak kullanmak ve şimdi Windows için yaptığımız gibi grafik uygulamaları uygulamak için araçlar sunuyor.