SVG黑科技互动排版『美化地理位置』模板代码

目录

• 设置地图背景

• 添加地理位置

• 透明隐藏位置

• 设置引导区域

设置地图背景

使用SVG标签设置地图背景，viewBox的参数值"0 0 图片的宽 图片的高"；

代码

<svg viewBox="0 0 828 1320" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQvRAWiaGKOa0rNicicN85ARfA1NEg1sahI8hbsv6kVygYwwKicVUtW5ksez7ticiat7Jz4X7tWp5p3EYXQ/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg">

添加地理位置

先在文章里面插入地理位置，然后预览文章获取地理位置的代码，只需提取a标签的代码（工具：Chrome浏览器调试工具）；

代码

<svg viewBox="0 0 828 1320" style="display: block;