Anfänger lernt SVG mit Javascript

[Beat]

Hallo zusammen.

Dies soll mein Sammelthread zum Thema SVG werden.

Inkscape besitzt ja den Editor, dessen GUI aber weit entfernt ist, von dem, was man in ein SVG Dokument schreiben könnte. Vor allem nervig ist, dass exaktes Arbeiten dort nicht möglich ist.
Ich bin deshalb dabei, mein erstes SVG händisch zu erstellen. Dieses soll aber zugleich dynamisch sein. Die Aufgabe ist, im Dokument Bauteile modulartig zu verbauen. Dies möchte ich mit Javascript machen.

Wo stehe ich bisher mit meinem Lernen
Meine Dokumentation:
http://www.w3.org/TR/SVG11/expanded-toc.html

Probleme mit der Dokumentation. Ich verstehe zum Teil die DOM Beschreibung nicht.
Frage: Gibt es gute Tutorials, die zeigen, wie man Javascript in SVG typischerweise zum laufen bringt.

Irgendwann soll das zusammengebaute Produkt ja gespeichert werden können. Das heisst, ich brauche ein XHTML Formular, welches Daten sendet an den Server (dort ist Perl verfügbar).
Frage:
Was ist besser:
SVG als Fragment in einem XHTML Dokument?
XHTML als Fragment in einem SVG Dokument?

(Browser Kompatibilität will ich hier mal aussen vor lassen. Ich rechne nicht mehr mit MSIE6. Ich weiss auch nicht, ob das dass öffentlich zugänglich wird.)

Problem CSS:
Ich sehe, dass ich CSS verwenden kann (also nich auf XSL angewiesen bin)
Nun ist es so, dass in CSS aber Eigenschaften angesprochen werden, welche im CSS2 Standard gar nicht beschrieben werden.
Wenn es in SVG ein Attribut stroke gibt, dann steht mir dieses Attribut scheinbar automatisch als CSS Eigenschaft zur Verfügung.

Frage:
Das ist schön. Aber darf ich mich darauf verallgemeinernd verlassen?

Problem:
In einem HTML Dokument werden, wenn nicht explizit unterdrückt, Scrollbalken angezeigt, sobald die Grösse den verfügbaren Viewport überschreitet.
Nicht so in SVG. Dort werden nur dann Scrollbars angezeigt, wenn ich dem äussersten <svg> Element eine "height" und "width" gebe. Entweder mache ich diese Angabe unnötig gross, oder der Inhalt kann unter Umständen nicht vollständig angezeigt werden.

Schreibe ich <svg overflow="scroll" />, so wird nur der vertikale Scrollbar angezeigt, nicht aber der horizontale, obwohl der Inhalt grösser ist. (Die Angabe im <style /> verhält sich gleich. )

Wie erreiche ich Scrollbars für beide Richtungen, wenn notwendig?

Ich teste mit Firefox 2.0. Kann sein, dass mangelhafte Unterstützung vorliegt.
Was muss ich beachten? Gibt es hier eine Übersicht über die SVG Unterstützung in Firefox, damit ich mich nicht zu Tode teste, um etwas zu erreichen?

mfg Beat

[Beat]

Problem CSS:
...
Frage:
Das ist schön. Aber darf ich mich darauf verallgemeinernd verlassen?
..
Ich teste mit Firefox 2.0. Kann sein, dass mangelhafte Unterstützung vorliegt.
Was muss ich beachten? Gibt es hier eine Übersicht über die SVG Unterstützung in Firefox, damit ich mich nicht zu Tode teste, um etwas zu erreichen?

Na das kann ich mir selbst schon ein bisschen beantworten:
Firefox 2.0 unterstützt, wie soeben beobachtet, die Einheit em nicht.

mfg Beat

[Beat]

Ich teste mit Firefox 2.0. Kann sein, dass mangelhafte Unterstützung vorliegt.

Die Konsole von FF2 sagt: setScale is not a function.
Das heisst, die Methode ist unbekannt.
Nun habe ich aber gefunden, dass es über setAttribute möglich ist diese fehlende Implementation andersweitig auszumerzen.

Das ist hässlich, weil es, wenn dies auch auf andere Methoden zutrifft, eigentlich die W3C Dokumentation obsolet macht.

Oder habe ich etwas übersehen? Muss ich ein spezielles Modul einbinden, um den Methodenzugriff auch unter FF2 zu erhalten?

Mein Document beginnt so:

  
<?xml version="1.0" standalone="no"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<svg version="1.1"  
   xmlns="http://www.w3.org/2000/svg"  
   xmlns:xlink="http://www.w3.org/1999/xlink"  
 >  

und mein erstes Javascript im code lautet

  
 <script type="text/ecmascript"> <![CDATA[  
 function my_zoom(var1){  
   document.getElementById("view_zoom").setAttribute("transform","scale("+var1+")" );  
 }  
 ]]> </script>  

Ich habe also die Spezifikation für svg und xlink referenziert. brauche ich noch etwas?

mfg Beat

[Vinzenz Mai]

Hallo Beat,

ich habe von SVG wenig Ahnung, auch wenn ich schon mit Inkscape ein paar Sachen realisiert habe. Ich käme jedoch nicht auf die Idee, mich mit Browsern an SVG zu versuchen, ganz besonders nicht mit IE, aber auch nicht mit Firefox.

Ich teste mit Firefox 2.0. Kann sein, dass mangelhafte Unterstützung vorliegt.
Was muss ich beachten? Gibt es hier eine Übersicht über die SVG Unterstützung in Firefox, damit ich mich nicht zu Tode teste, um etwas zu erreichen?

Nicht speziell Firefox, aber schon oft verlinkt: http://www.codedread.com/svg-support.php

Freundliche Grüße

Vinzenz

[Beat]

Was muss ich beachten? Gibt es hier eine Übersicht über die SVG Unterstützung in Firefox, damit ich mich nicht zu Tode teste, um etwas zu erreichen?

Nicht speziell Firefox, aber schon oft verlinkt: http://www.codedread.com/svg-support.php

Ja danke.
Der Link ist bestimmt ein ganz brauchbarer Reminder.

Ich denke ich brauche noch eine Weile, bis ich mich von der Theorie (svg Standard nach w3c) zur Praxis durchgegoogelt habe.
Immerhin habe ich jetzt mein erstes lauffähiges Mini JS in SVG.

mfg Beat