Javascript 如何在SVG中最好地包含用于动态地图的微数据？

任务：使用SVG制作动态和样式化的地铁地图，如北京地图

目标：使用标准格式在公共领域创建metro（或类似）地图的集合，并提供一个脚本和样式表的小型库，便于未来的开发人员适应自己的使用

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

使用SVG动画的示例动画如下：

附加这些微数据最方便开发者的方式是什么

---

（对于感兴趣的人来说，更多的项目背景：）

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

---

最正确和标准的方法是使用SVG

标记

---

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

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

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

今天的地图标记（）对于一个车站（本例中为北京火车站）可能类似如下：

北京火车站
北京站

上述三个站点组件实际上没有以任何方式连接，除非通过视觉接近。微格式地铁站表示的第一步可能是这样的：

<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>

1971-11-7
116.41735553741455,39.90104520501837,0.0
北京火车站
北京站

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

在第一次尝试中，我将“metadata”元素与“desc”元素一起使用。这可能是一个好的选择，也可能不是。“metadata”应该很好，但是“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属性，然后添加带有URL的itemid，该URL的片段为其自身（示例：

)

---

或者创建或引用您或其他人的另一个网页，最好包含微数据项和适当的itemtype引用。

关于HTML5微数据，请参阅。谢谢，我忘记了一个隐含的要求，动态地图必须与支持SVG的现代浏览器配合使用。由于这个原因，HTML微数据不起作用，而且对HTML和SVG都不起作用。微数据是WHATWG对微格式的响应，微格式可能是解决这个问题的一种可能的方法。这是关于geodata的页面：通常HTML微格式使用“div”、“span”和“class”对语义数据进行编码，SVG有类似的元素，例如“g”可以滥用。挑战在于，我们不仅需要对语义数据进行编码，比如说，这个地铁站位于这个经纬度，或者它在这个日期开通。这些数据将用于动态目的，例如，地理位置将“延伸”到其实际位置或开放日期，从而使网络按时间顺序发展。我们将实现其中一些功能，地图用户可以自行实现其他功能。换句话说，要走RDFa之路，必须有一个高效且易于使用的Javascript API。我不知道是否有，但可以询问RDFa社区。我添加了这个问题，允许我们将语义信息附加到SVG元素（例如，这个站点/圆圈是在这个日期打开的），但它本身并不能解决更大的问题：如何再次提取此信息（例如，对于给定的站点，它的打开日期是什么）申请

<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>

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