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

Question

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

这让您“身临其境”。然而，真正的问题从 HTML5 开始，所以我们开始吧。

---

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

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

该标准鼓励使用 <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 环境中)。