如何最好地将微数据与 SVG 一起包含在动态地图中

How to best include microdata with SVG for dynamic maps?

本文关键字：包含 一起 动态 地图 SVG 何最好 数据      更新时间：2023-09-26

>任务：使用 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）

遗憾的是，微数据属性仅针对 HTML 元素定义，这意味着它们不会在 SVG 中进行处理。我建议看看RDFa，它被设计成以多种格式工作，如HTML，XML和SVG：

  • http://www.w3.org/TR/rdfa-lite/
  • http://www.w3.org/TR/rdfa-primer/

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

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

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

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

相对于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">北京站</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">北京站</text>
</g>

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

第一次尝试时，我将"元数据"元素与"desc"元素一起使用。这可能是也可能不是一个好的选择。"元数据"应该没问题，但"desc"元素是为人类受众准备的，而不是Javascript。查找无副作用的元素势在必行，无论是使用 SVG 渲染器还是其他 SVG 处理器（例如 SVG 屏幕阅读器）。我还不能判断"desc"是否填补了账单。

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

（从结构上讲，我认为RDFa解决方案看起来很相似，只是RDF现在有"desc"元素。

我会推荐两种方法之一。

两者都涉及在HTML5中对SVG地图进行图例或类似引用。然后使用微数据作为图例。确保通过以下方式在页面中引用 SVG：

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

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

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

）

或者创建或引用您或其他人的另一个网页，最好包含微数据项和体面的项目类型引用。

相关文章：