点A现B，又或是点击弹图，应该公众号SVG排版中最常见的应用场景之一。

前段时间行歌还录制了免费的视频教程专门来介绍点A现B的基本原理，我把教程链接在文末，对原理不了解的同学可以先去看看视频教程。

老规矩，先来看一下这次要实现的其中一个案例。

虽然点A现B的原理很简单，它的难点是在布局上，那么有没有一种高效的布局方式来实现任意位置的点A现B呢？答案是肯定的。

今天行歌挥泪献上自己珍藏已久的干货，用flex布局高效地实现点A现B的图文排版，用它可以轻松实现诸如：地图定位弹出，圣诞树礼物定位弹出等常用场景。

由于是采用百分比布局，这种方式还可以完美自适应图文尺寸，实现精确定位。

本篇教程中，我会用两个案例来阐述如何用flex布局实现点A现B，一种是经典的九宫格布局，另外一种是任意位置的的布局。

九宫格中的点A现B

用flex布局实现九宫格简单的只需要几行代码。

<section style="display:flex;flex-wrap:wrap;">
  <section style="width:33.33%;"></section>
  <section style="width:33.33%;"></section>
  <section style="width:33.33%;"></section>
  <section style="width:33.33%;"></section>
  <section style="width:33.33%;"></section>
  <section style="width:33.33%;"></section>
  <section style="width:33.33%;"></section>
  <section style="width:33.33%;"></section>
  <section style="width:33.33%;"></section>
</section>

但这样写是有问题的，由于我们要实现自适应布局，所以不能显示的设置元素的高度，这里我使用了一个宽高比相同的svg标签来将容器撑起来，还记得我们在《自适应伸长图文》教程中介绍过它的原理，SVG标签可以根据viewBox的比例将父容器撑开。

<section style="display:flex;flex-wrap:wrap;">
  <section style="width:33.33%;">
    <section style="height:0;">图片1</section>
    <section style="pointer-events:none;">
      <svg viewBox="0 0 100 100"></svg>
    </section>
  </section>
  ...
  <section style="width:33.33%;">
    <section style="height:0;">图片9</section>
    <section style="pointer-events:none;">
      <svg viewBox="0 0 100 100"></svg>
    </section>
  </section>
</section>

再加入一些css样式，我们就完美地实现了九宫格点A现B的效果。

九宫格点A现B

任意位置的点A现B

任意位置的布局和九宫格类似，首先我们将flex容器定位到点击提示元素所在区域，再将容器细分为适当大小的网格，覆盖到点击区域的网格就是我们需要放置弹出图文的地方。

如上图所示，我们用2组容器覆盖2个点击区域，上面一组分为5个网格，下面分为4 个网格，很明显我们只需要在每组第2个网格中放入弹出图片，大家可以根据需要来细分网格数和大小。

<!-- 第一组5个网格 -->
<section style="height:0;">
  <section style="display:flex;width:60%;padding-top:30%;">
    <section style="width:20%;">
      <svg viewBox="0 0 100 100"></svg>
    </section>
    ...
  </section>
</section>

<!-- 第一组4个网格 -->
<section style="height:0;">
  <section style="display:flex;width:60%;padding-top:100%;">
    <section style="width:25%;">
      <svg viewBox="0 0 100 100""></svg>
    </section>
    ...
  </section>
</section>

总结

经过这么多案例的学习，大家一定已经了解flex布局为我们带来的好处，相信聪明的你可以想出更多flex布局玩法，这次的分享就到这喽！如果想学习更多的SVG动画排版知识欢迎给我留言。

点A现B基础视频教程: https://ke.qq.com/course/3134707

关注