Incrustar SVG en XUL

Question

Quiero incrustar SVG en XUL. Intenté usar el este tutorial que requiere el pegado del código SVG en la aplicación XUL y Funciona pero esto no es limpio. Quiero mantener los archivos SVG y XUL separados, además, me gustaría usar un archivo CSS separado para la parte SVG. ¿Algún ejemplo de cómo podemos hacer esto?

Answer 1

Puedes usar xul-overlays:

1) Declare la superposición en la parte superior de su archivo xul:

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

2) Defina un elemento svg de contenedor vacío dentro de su archivo xul y asígnele la misma ID que al elemento svg principal en el archivo incluido.

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

3) Recuerde usar un espacio de nombres separado para la parte svg (consulte svg: svg arriba) y declararlo.

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

4) Convierta su archivo SVG en una superposición colocando una declaración de superposición alrededor (me temo que tiene que hacer esto).

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

Sobre archivos css separados: simplemente crea dos de ellos e inclúyelos donde quieras, incluso en la superposición svg.

Es posible que desee ver un ejemplo funcional: un pequeño cuestionario de geografía que creé hace años y que actualicé ayer para que vuelva a funcionar en los Firefox actuales:

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

¡Mira los archivos de origen!