在SVG黑科技排版中插入视频号是比较常见的排版效果，为了让SVG排版效果更加美观，我们会对视频号进行“美化处理”，也就是视频号美化。

大家可能平时没有去关注发现，安卓手机点击视频号、地图等的时候会出现高亮“蓝色”背景，影响SVG排版的美观，懂点君今天来给大家分享如何解决视频号高亮背景的问题。先来说说视频号美化原理，我们才好理解如何解决这个问题。

视频号美化原理：通过零高容器创建两个叠层，最上层是放一张图片，底下的层放视频号，并对视频号进行缩放移动调整点击区域和透明处理隐藏起来。用户看到的是一张图片，看不到真实的视频号，点击的时候，触发的是底下的视频号，然后进行跳转。

美化案例

案例一：视频号美化处理

案例二：视频号美化处理

高亮问题

懂点君发现视频号美化之后，在安卓手机上点击跳转的时候会出现高亮“蓝色”背景，而且图片无法盖住这个蓝色背景，有点影响SVG排版的美观，具体查看如下动图。

高亮原因

HTML元素设置CSS cursor样式属性之后，在移动端点击该元素，元素会产生高亮的背景（高亮背景是系统给用户一个反馈，让用户知道你的点击是有效果的）。

cursor属性：定义了鼠标指针放在一个元素边界范围内时所用的光标形状，pointer值对应的是小手。

我们插入视频号之后，视频号自己就加上了cursor属性，因为是公众号自动添加生成，我们无法手动删除该属性。

解决高亮

解决原理：在SVG排版美化视频号时给视频号容器设置cursor样式属性，然后再设置高亮tap-highlight-color的值为透明（transparent），用户点击的时候高亮背景是有显示，只是透明掉了用户无法看到而已。

点击查看解决后的案例：点击无高亮背景视频号跳转

懂点君写出了核心代码：

<section style="cursor: pointer; -webkit-tap-highlight-color: transparent;">
    <!-- 这里放视频号 -->
</section>

SVG排版案例库