Accelerated Mobile Pages：地图区域替代方案答案

【问题标题】：Accelerated Mobile Pages: Map Area alternativeAccelerated Mobile Pages：地图区域替代方案
【发布时间】：2019-12-27 16:29:09
【问题描述】：

我正在使用 AMP，并且我需要在具有某些坐标的图像上添加 href，如下例所示：

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

如何在 AMP 上做到这一点？

【问题讨论】：

标签： amp-html

【解决方案1】：

改用 SVG（甚至是响应式的）。这是一个例子：

<figure id='backing'>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 504" preserveAspectRatio="xMinYMin meet">
      <image width="1280" height="504" xlink:href="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg">
      </image>
      <a on="tap:AMP.navigateTo(url='game1.html')">
        <circle cx="243" cy="133" r="79" fill="#fff" opacity="0.15" /></a>
      <a on="tap:AMP.navigateTo(url='game2.html')">
        <rect x="870" y="147" width="680" height="33" fill="#fff" opacity="0.25" /></a>
      <a on="tap:AMP.navigateTo(url='game3.html')">
        <circle cx="889" cy="379" r="80" fill="#fff" opacity="0.1" /></a>
      <a on="tap:AMP.navigateTo(url='game4.html')">
        <circle cx="770" cy="671" r="73" fill="#fff" opacity="0.2" /></a>
      <a on="tap:AMP.navigateTo(url='game5.html')">
        <polygon id="test" points="163,587 214,492 267,473 335,483 377,603 327,631 249,658 211,641" fill="#fff" opacity="0.3" /></a>
    </svg>
  </figure>

诀窍是：AMP actions 在 SVG 内部工作，因此您可以添加导航到不同页面或更新 AMP 状态的点击处理程序。

注意：SVG 示例来自this answer。

【讨论】：