0

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

这让你“在上下文中”。然而真正的问题从 HTML5 开始，所以我们开始吧。

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

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

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

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

有什么方法可以避免这些问题吗？

4

1 回答 1

0

由于缺乏支持，我继续尝试将 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>引用外部 CSS 文件的元素@import（与处理指令相同的文件）
  • <style>具有适当内容的元素。

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

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

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

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

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

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

<animation>只有 Opera 工作。它与<use>. 其他人根本没有显示引用的文件。

最后，我还检查了文件内部的<use>引用。<symbol>并且所有浏览器都正常运行。

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

于 2012-10-05T08:35:22.770 回答