SVG in xul einbetten

Question

Ich möchte SVG in Xul einbetten. Ich habe versucht, das zu benutzen Dieses Tutorial Dies erfordert das Einfügen des SVG -Code in XUL -Anwendung und es funktioniert jedoch nicht sauber. Ich möchte SVG- und XUL -Dateien getrennt halten. Weiterhin möchte ich eine separate CSS -Datei für SVG -Teil verwenden. Alle Beispiele, wie wir das tun können?

Answer 1

Sie können Xul-Overlays verwenden:

1) Deklarieren Sie das Overlay oben in Ihrer XUL -Datei:

<?xul-overlay href="africa.svg"?>

2) Definieren Sie ein leeres Container -SVG -Element in Ihrer XUL -Datei und weisen Sie dieselbe ID dem Haupt -SVG -Element in der enthaltenen Datei zu.

<box>
  <svg:svg id="mapa" />
</box>

3) Denken Sie daran, einen separaten Namespace für den SVG -Teil zu verwenden (siehe SVG: SVG oben) und deklarieren Sie ihn.

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:svg="http://www.w3.org/2000/svg">

4) Machen Sie Ihre SVG -Datei zu einem Overlay, indem Sie eine Overlay -Deklaration rundum einstellen (ich fürchte, Sie müssen dies tun).

<overlay xmlns="http://www.w3.org/2000/svg">
 <svg id="mapa">
  ...
</overlay>

Über separate CSS -Dateien: Erstellen Sie einfach zwei davon und geben Sie sie an, wo immer Sie möchten - auch in der SVG -Overlay.

Vielleicht möchten Sie in ein Arbeitsbeispiel nachsehen - ein kleines Geographie -Quiz, das ich vor Jahren erstellt und gestern aktualisiert habe, damit es in aktuellen Firefoxes wieder funktioniert:

http://open-projects.net/~nico/countryquiz/

Schauen Sie sich einfach die Quelldateien an!