Question

我想将SVG嵌入到XUL中。我试图使用this tutorial，它需要在XUL应用程序中粘贴SVG代码并且它可以工作，但这不是很干净。我想将SVG和XUL文件分开，进一步我想为SVG部分使用单独的CSS文件，我们如何做到这一点的任何例子？

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叠加层中也是如此。

你可能想查看一个有效的例子 - 我几年前创建的一个小地理测验，昨天刚刚更新，以便在当前的firefox中再次运行：

只需查看源文件！