在 XUL 中嵌入 SVG答案

【问题标题】：Embedding SVG in XUL在 XUL 中嵌入 SVG
【发布时间】：2010-12-09 08:21:45
【问题描述】：

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

【问题讨论】：

标签： css svg xul

【解决方案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 中再次工作的小型地理测验：

只看源文件！

【讨论】：