在XUL中嵌入SVG

Question

我想把SVG嵌入到XUL中。我尝试使用this tutorial，它需要在XUL应用程序中粘贴SVG代码，它可以工作，但这并不干净。我想保持SVG和XUL文件分开，此外，我想使用一个单独的CSS文件的SVG部分，有任何例子，我们可以做到这一点？

Answer 1

您可以使用xul-overlays：

1)在xul文件的顶部声明覆盖：

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

2)在xul文件中定义一个空的容器svg元素，并为其分配与所包含文件中的主svg元素相同的id。

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

3)记住对svg部分使用单独的名称空间(参见上面的svg:svg )并声明它。

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

4)通过在周围放置一个覆盖声明来使svg文件成为覆盖(恐怕您必须这样做)。

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

关于单独的css文件:只需创建其中的两个文件，并将其包含在您想要的任何位置-即使在svg覆盖中。

你可能想看一个正在运行的例子--我几年前创建的一个小的地理测验，昨天刚刚更新，让它在当前的firefoxes中再次工作：

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

看看源文件就知道了！