Skripterstellung für SVG

Question

Ich denke darüber nach, eine Website ähnlich wie Stackoverflow zu entwickeln, aber die Antworten können auch aus Zeichnungen (in diesem Fall Schaltplänen) bestehen.Ich möchte im Antwortformular einen Bereich haben, in dem sie diesen Schaltplan erstellen können, ohne dass spezielle Plugins usw. erforderlich sind.

1. Sind wir an dem Punkt angelangt, an dem SVG bald (in 1–2 Jahren) eine kritische Masse erreicht hat oder erreichen sollte, so dass es sinnvoll ist, eine Website zu entwerfen, bei der skriptgesteuertes SVG als primäre Funktion im Vordergrund steht (d. h. Firefox oder ein anderer SVG/AJAX-kompatibler Browser erforderlich ist)?
2. Welche guten Ressourcen gibt es zum Erlernen plattformübergreifender SVG-Skripterstellung (wahrscheinlich in Javascript)?

-Adam Davis

Answer 1

Leider habe ich keine Antwort, aber ich habe drei Hinweise auf Projekte, die Sie sich ansehen könnten.

Das erste ist das Lebendiger Kern von Dan Ingalls (ja, Die Dan Ingalls) bei Sun Labs.Es handelt sich um eine Implementierung einer Smalltalk Virtual World in JavaScript auf Basis von SVG.Genauer gesagt handelt es sich um eine Implementierung des Morphic GUI-Frameworks von Squeak Smalltalk in JavaScript unter Verwendung von SVG und einer Portierung von (Teilen von) Squeak Smalltalk in JavaScript.

Oder, wenn Sie kein Smalltalker sind und das oben Genannte für Sie keinen Sinn ergibt:Es handelt sich um ein in JavaScript geschriebenes Betriebssystem mit dem JavaScript-Interpreter als CPU, SVG als Grafikkarte und dem Browser als Computer.

Das ist so extrem, wie es nur geht, wenn es um JavaScript und SVG geht.Und das nur völlig funktioniert in Safari 3 und teilweise in Firefox 3, obwohl es auch eine experimentelle Portierung für Internet Explorer gibt.

Das zweite Projekt ist das von John Resig Processing.js Portierung der Processing-Visualisierungssprache auf JavaScript.Es nutzt die <canvas> Element anstelle von SVG verwenden, genau wegen der von Ihnen erwähnten Probleme.Dieses funktioniert jedoch nur in Firefox 3.

Der dritte ist Echtzeit-3D in JavaScript von Useless Pickles.Es benutzt nur JavaScript, DOM und CSS und NEIN SVG bzw <canvas> oder Flash oder was auch immer. Und Es ist auf fast jeden Browser portierbar, einschließlich Internet Explorer 7 und höher.2D sollte noch einfacher sein.

Zwischen diesen drei Projekten sollten Sie Inspiration finden und auch einige Leute finden, die versucht haben, mit JavaScript und SVG oder JavaScript und Grafiken neue Maßstäbe zu setzen, und die Ihnen sagen können, was funktioniert und was nicht.

Abschluss:Cross-Browser SVG oder Cross-Browser machen <canvas> ist nahezu unmöglich, aber mit ein wenig Verrücktheit und browserübergreifenden Grafiken ohne SVG bzw <canvas> ist möglich.

Answer 2

Raphael sieht nach einer interessanten Herangehensweise an das Problem browserübergreifender Vektorgrafiken aus.

Answer 3

SVGWeb ist ein Skript, das dem IE mithilfe von Flash nahezu native SVG-Funktionen hinzufügt.Alle anderen großen Browser unterstützen SVG.

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

Answer 4

1/ wahrscheinlich nie – wenn IE es hinzufügen wollte, dann hätte ich gedacht, dass es das inzwischen getan hätte;aber es gibt Problemumgehungen mit SilverLight Und Gecko Rendering bereitzustellen.Andererseits stehen browserübergreifende Grafik-APIs zur Verfügung.Ich habe umfangreiche Frontends mit XULRunner und SVG erstellt, aber nichts im Web, das den IE berücksichtigen musste.

2/ Die beiden, die ich am häufigsten erwähnt habe, waren die SVG-Seiten auf mozilla.org und das SVG-DOM-Referenz .Alle meine SVG-Links finden Sie hier lecker

Es gibt einen bestehenden Editor unter http://www.bpel4chor.org/editor/;Auch wenn Sie nur Schaltpläne wünschen, bei denen sich alle Bögen in einem Raster befinden, können Sie dies ganz gut mit Divs und Bildern ohne SVG tun.Oder Sie könnten einfach gehen Lo-Fi-Route

Answer 5

Wie @jwmittag erwähnt <canvas> ist eine Option.

Es funktioniert in Saffari und Firefox 3, Opera 9 und Menschen entwickeln Unterstützung für IE.

Sie könnten problemlos Mausklicks erfassen, die mit dem aktuellen Werkzeug und den aktuellen Eigenschaften verknüpft sind.Die Leinwand wird bei jeder Seitenanzeige neu gezeichnet.

Ich habe gerade ein Projekt mit abgeschlossen <canvas> und es ist eine einfache und sehr leistungsstarke API, mit der Sie arbeiten können, insbesondere wenn Sie jemals OpenGL- oder Cairo-Arbeiten durchgeführt haben.

Viel Glück, klingt nach einem coolen Projekt.