在 XUL 中嵌入 SVG
我想将 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以使用 xul-overlays:
1) 在 xul 文件顶部声明覆盖:
2) 在 xul 文件内定义一个空容器 svg 元素,并为其分配与包含文件中的主 svg 元素相同的 id。
3) 请记住为 svg 部分使用单独的命名空间(请参阅上面的 svg:svg)并声明它。
4)通过在周围放置覆盖声明来使您的 svg 文件成为覆盖(恐怕您必须这样做)。
关于单独的 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:
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.
3) Remember to use a separate namespace for the svg part (see svg:svg above) and declare it.
4) Make your svg file an overlay by putting an overlay declaration all around (I'm afraid you have to do this).
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!