样式和脚本 SVG 文档引用不同的 SVG 文档

Question

我在玩 SVG 和 HTML5。目前我正在检查客户端 SVG 生成的可能性。这个想法是 HTML5 提供 <embed> 元素，其中包含描述基于十六进制的游戏地图的 XML 文档（以我自己的“格式”）。该文档附加了指向 XSL 文件（在服务器上）的 XSLT 转换，该文件从文档中生成 SVG。我想在单独的 SVG 文件（存储在服务器上）中制作地图的不同十六进制，生成的 SVG 地图只会引用它们。

这会让您“置身于上下文中”。然而真正的问题始于 HTML5，所以我们开始吧。

---

如何从 SVG 文档中引用其他 SVG 文档（或其片段），以便包含的内容可用于样式和脚本？似乎元素 <use> 和 <image> 在添加不属于文档的“克隆片段”方面非常有限（即使对于脚本......）。我不确定 SVG 1.2 中的 <animation> 怎么样，但我猜它是一样的。

我显然缺少类似于 #inlcude 的原始 C++ 预处理器。

该标准鼓励使用<defs> 和<symbol> 来增加意义和可访问性。然而，一旦你这样做了（因此必须用<use> 引用符号），你的造型就不走运了。我不明白如何使用改变样式的相同符号。

所有这些都使得重用和表示/内容分离变得更加困难。

有没有办法避免这些问题？

Answer 1

由于缺乏支持，我继续尝试将 SVG 渲染器限制在少数流行的浏览器上。另外我只检查了样式，因为我不擅长 JavaScript。

（我的测试是从本地文件完成的，这在某些情况下可能很重要。）

---

我检查了以下浏览器：Internet Explorer、Chrome、Mozilla Firefox、Opera 和 Safari。我一直在更新它们（Opera 和 Safari 刚刚下载），所以它们都是当前版本。

关于样式，我检查了以下功能：

1. <image>,
2. <use>,
3. <animation>（来自 SVG 1.2 Tiny，否则我使用 1.1）。

这三个都在主文件中使用 CSS 样式，在引用文件中使用 CSS 样式。进一步提供 3 种风格的 CSS 样式的引用文件：

• xml-stylesheet处理指令，
• <style> 元素与 @import 引用外部 CSS 文件（与处理指令相同的文件）
• <style> 具有正确内容的元素。

---

<image> 没有浏览器考虑主文档的样式（如预期的那样）。然而，除了 IE 之外的所有浏览器都没有考虑到所引用文档的样式，如果它被放置在外部文件中（并且被 xml-stylesheet 或 @import 引用）。

我不确定谁在这里做得不好。通常你会在这种情况下责怪 IE，但这里的 IE 行为似乎更好，所以这次可能是其他错误。

Opera 也有点随机。如果我不断刷新页面，它有时会像 IE 一样显示，但主要是像其他浏览器一样（在某些情况下缺乏样式）。

---

使用 <use>（在引用文件中引用根 <svg> 元素）Firefox 在使用引用文件样式（无论它们以何种方式提供）和主文件样式时都能正常运行。

Opera 使用引用的文件样式（无论以何种方式提供），但不包括主文件样式。

其他浏览器根本不显示引用的文件。

---

对于<animation>，只有 Opera 有效。它的作用与<use> 相同。其他人根本没有显示引用的文件。

---

最后我还检查了<use> 在文件中引用了<symbol>。所有浏览器都正常运行。

---

这导致一个可悲的结论，即 SVG 文件分离和重用几乎是不可能的（至少在 Web 环境中）。