1

任务：使用 SVG 制作动态和风格化的地铁地图，例如这张北京地图http://upload.wikimedia.org/wikipedia/commons/c/c5/Beijing-Subway-Plan_en.svg

目标：使用标准格式制作公共领域的地铁（或类似）地图集合，带有一个小型脚本和样式表库，便于未来的开发人员适应自己的使用。

挑战：基于 HTML 样式的微数据使类似的地图可增强、可动画化和可样式化。这些数据包括但不限于时间和地理数据。如车站开通日期、各车站的经纬度、车站之间的行程时间等。这些微数据将用于动画、造型和未来使用。

一个示例动画是这样的，使用 SVG 动画：http: //upload.wikimedia.org/wikipedia/commons/d/d0/History_of_Beijing_Subway_en.gif

附加这些微数据对开发人员最友好的方式是什么？

（更多项目背景，感兴趣的人：http ://www.skyscrapercity.com/showthread.php?t=1609787 ）

4

4 回答 4

2

不幸的是，微数据属性只为 HTML 元素定义，这意味着它们不会在 SVG 中处理。我建议查看 RDFa，它设计用于多种格式，例如 HTML、XML 和 SVG：

于 2013-09-23T16:36:29.190 回答
0

我会推荐两种方法中的一种。

两者都涉及到 HTML5 中的 SVG 地图的图例或类似引用。然后使用 Microdata 作为图例。确保通过以下方式在页面中引用 SVG：

  • 使用 SVG 中的 id 属性，以便 HTML 微数据可以使用 itemprop 属性链接到 URL 片段，#svgobject1
  • 不太可能使用，但有趣的是允许使用 HTML 图例中的 itemref 属性。我会避免这种情况，因为它很乱。

除了上述方法之外，另一种方法是使用 itemid 属性。如果可能的话，我会为任何微数据项目推荐这个。确定 SVG 地图图例是否是原始真实的项目集合。如果是这样，则在每个带有 itemscope 的 HTML 标记中包含 id 属性，然后使用带有片段的 URL 添加 itemid 本身（例如：

<div id="itemid" itemscope="" itemid="http://maps.cn/beijing.html#itemid">

)

或者创建或引用您或其他人的另一个网页，最好在其中包含 Microdata 项目和体面的项目类型参考。

于 2014-07-23T14:59:16.103 回答
0

这是解决此问题的另一种方法，其灵感来自 HTML 微格式（将信息嵌入额外的 HTML 元素，通常是“div”和“span”）。通过主要使用“g”元素，可以在 SVG 中实现类似的功能。

相对于RDFa，它会有一些缺点。例如，在地图制作社区之外，人们不会告诉某条特定信息是开放日期。这意味着需要一些额外的 SVG 标记来嵌入这些信息。另一方面，它是一种更直接和可读的方法。但它将如何应对挑战并实现目标？

今天的地图标记（清理后）对于一个车站（在本例中为北京火车站）可能看起来像这样：

<circle id="circle452" cx="1512.523" cy="1300.289" r="5.625" class="station"/>
<text dx="1522.5999" dy="1321.2517" xml:lang="en" class="station-name">Beijing Railway Station</text>
<text dx="1522.9651" dy="1306.156" xml:lang="zh" class="station-name">北京站&lt;/text>

上面的三个车站组件实际上并没有以任何方式连接，除了视觉上的接近。微格式地铁站表示的第一次尝试可能是这样的：

<g class="station">
    <metadata>
         <desc class="opening-date">1971-11-7</desc>
         <desc class="coordinates">116.41735553741455,39.90104520501837,0.0</desc>
   </metadata>
    <circle id="circle452" cx="1512.523" cy="1300.289" r="5.625" class="icon"/>
    <text dx="1522.5999" dy="1321.2517" xml:lang="en" class="name">Beijing Railway Station</text>
    <text dx="1522.9651" dy="1306.156" xml:lang="zh" class="name">北京站&lt;/text>
</g>

与第一种方法相比，这具有一些优势，因为相关元素（车站符号、英文和简体中文名称）现在与元数据在结构上相关。

在第一次尝试中，我将“元数据”元素与“描述”元素一起使用。这可能是也可能不是一个好的选择。“元数据”应该没问题，但“desc”元素是为人类观众设计的，而不是 Javascript。对于 SVG 渲染器和其他 SVG 处理器（例如 SVG 屏幕阅读器），查找无副作用的元素势在必行。我还不能确定“desc”是否满足要求。

此外，这能否应对挑战并实现目标？换句话说，提取这些数据并将其应用于动画是否容易？

（从结构上讲，我假设 RDFa 解决方案看起来类似，只是现在使用“desc”元素所在的 RDF。）

于 2013-09-25T12:46:53.090 回答
0

最正确和最标准的方法是使用 SVG<metadata>标签。

http://www.w3.org/TR/SVG/metadata.html

元数据应采用 RDF 格式。您需要做的就是使用已经存在的适当 RDF 模式，或者创建适合您使用的自己的模式。

于 2013-09-24T00:20:04.253 回答