Thomas Meinike: svg (adobe svg viewer)

Beitrag lesen

Hallo,

Zukunftsweisend wäre in dieser Hinsicht eher Firefox 1.5, der mehr als nur SVG Tiny unterstützt,

Ja, da geht was -- siehe Firefox 1.5 SVG Status.

Ich hoffe, dass zumindest das Animation Module noch Eingang in FF 1.5 findet.

BTW: Auch die Win32-Version der gerade erschienenen Beta 2 verwendet die "cairo engine", sodass man auf die bisher unter W9x und W2K zusaetzlich benoetigte gdiplus.dll verzichten kann.

Hier noch einige Tipps zum Erstellen von (dynamischem) SVG-Code, der auch unter FF 1.5 laeuft wie mit dem Adobe Viewer (ASV):

  • beim Erzeugen von Elementen createElementNS("http://www.w3.org/2000/svg",elementname) gegenueber createElement(elementname) den Vorzug geben (weil FF im Gegensatz zum ASV nicht nur innerhalb eines Namensraumes agieren kann). Bei der Verwendung der Attribut-Methoden getAttribute() und setAttribute() muss nach meinen Erfahrungen nicht unbedingt von deren Namensraum-Zwillingen getAttributeNS() und setAttributeNS() Gebrauch gemacht werden (bzw. nur dann, wenn es sich um einen anderen als den SVG-NS handelt, also typischerweise xlink:href).

  • beim Setzen von CSS-Eigenschaften mit setProperty(property,value,priority) konsequent den letzten Parameter mitgeben. Die Prioritaet ist meistens ein Leerstring, kann aber auch "important" sein.

  • die Adobe-spezifischen Methoden getURL() bzw. postURL() kann man mittels XMLHttpRequest() nachbilden, ggf. also nach entsprechenden Abfragen darauf zugreifen. Der ASV ist also seit Jahren AJAX-faehig, nur nannte das niemand so ;-).

  • die Adobe-spezifischen Methoden parseXML() und printNode() koennen durch XMLParser() und XMLSerializer() nachgebildet werden.

  • das a-Element wird nicht als SVGAElement unterstuetzt, sondern ueber die XML Binding Language (XBL) integriert. Linkzuweisungen mittels xlink:href funktionieren, aber das a-Element reagiert nicht auf click-Ereignisse.

Statt
<a xlink:href="" onclick="Funktion()"><text x="..." y="...">Text</text></a>
besser verwenden:
<a xlink:href=""><text x="..." y="..." onclick="Funktion()">Text</text></a>

Wer jetzt meint, dass dieser Link mit Leerstring doch gar nicht noetig waere, sollte wissen, dass solche Konstrukte mangels Unterstuetzung von cursor: pointer (kann erst der ASV 6) gern verwendet werden, um eben die typische Hand beim JavaScript-Link zu erhalten.

  • waehrend der ASV die Methode getElementById() auch beim root-Objekt toleriert, ist FF hier (wie an anderen Stellen auch) konsequenter und bekommt nur beim document-Objekt Zugriff. So etwas merkt man erst beim Testen eigener Beispiele, die bisher problemlos liefen (ist mir wohl 1-2 Mal passiert).

  • zu beachten ist noch, dass die (serifenlose) Grundschrift im ASV ca. 12px und unter FF ca. 16px betraegt. Es empfiehlt sich also eine explizite Vorgabe von Schriftart und -groeße, speziell beim Positionieren von Grundformen auf Koordinatenbasis und dazu passenden Texten.

Ein Workaround zur Angleichung der Grundgroeßen innerhalb eines Stylesheets ist:

*
{
  font-size: 12px;
  font-family: sans-serif;
}

Mit diesen wenigen Erkenntnissen konnte ich ca. 90% meiner bisherigen SVG-Codes unter FF 1.5 lauffaehig bekommen. Der Rest sind dann die Dinge, die im FF noch fehlen (Animationen usw.).

MfG, Thomas