在 XUL 中嵌入 SVG

发布于 2024-08-08 05:07:59 字数 236 浏览 3 评论 0原文

我想将 SVG 嵌入到 XUL 中。我尝试使用 本教程,它需要在 XUL 应用程序中粘贴 SVG 代码,并且它可以工作,但这并不干净。我想将 SVG 和 XUL 文件分开,此外我想为 SVG 部分使用单独的 CSS 文件,有什么例子我们可以如何做到这一点?

I want to Embed SVG into XUL. I tried to use the this tutorial which requires pasting of the SVG code in XUL application and it works but this is not clean. I want to keep SVG and XUL files separate, further I will like to use a separate CSS file for SVG part, any examples how we can do this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

我不会写诗 2024-08-15 05:07:59

您可以使用 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 中再次工作:

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

只需查看源文件即可!

You can use xul-overlays:

1) Declare the overlay at the top of your xul file:

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

2) Define an empty container svg element inside your xul file and assign the same id to it as to the main svg element in the included file.

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

3) Remember to use a separate namespace for the svg part (see svg:svg above) and declare it.

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

4) Make your svg file an overlay by putting an overlay declaration all around (I'm afraid you have to do this).

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

About separate css files: Just create two of them and include them wherever you want - even in the svg overlay.

You might want to look inside a working example - a small geography quiz which I created years ago and just updated yesterday to make it work again in current firefoxes:

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

Just look at the source files!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文