喜迎
新春
首页 SVG交互🌀

小程序

<a data-miniprogram-appid="appid" data-miniprogram-path="路径">
……
</a>

网页链接

<a href="文章链接" target="_blank">...</a>

小程序无图标处理

<svg viewBox="0 0 * *" style="background-image: url(图片链接);background-size: 100%;">
    <a data-miniprogram-appid="appid" data-miniprogram-path="路径">
        <rect width="*" height="*" opacity="0"></rect>
    </a>
</svg>

网页链接无图标处理

<svg viewBox="0 0 * *" style="background-image: url(图片链接);background-size: 100%;">
    <a href="文章链接" target="_blank">
        <rect width="*" height="*" opacity="0"></rect>
    </a>
</svg>

针对一张位图的部分区域添加超链,或不同的区域添加不同的链接,可将位图放入Ai当中,在需要跳转的区域添加矩形,导出代码后将位图置入svgbackground,矩形opacity设置为0后添加超链。

参考演示




文章评论