SVG交互设计—超链接无图标处理

首页 / 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后添加超链。

SVG
打赏
评论区
头像