嗨喽，宝子们，三儿又来为大家推荐新的SVG组件玩法了，今天要为大家分享的是回力品牌都在用的点击标签抽出卡片效果，此效果兼具高级感和实用性为一体，话不多说，赶紧开启我们今天的学习之旅吧！
（来自回力公众号）
这篇推文来自品牌回力，本文主要向大家介绍了同一款鞋子的不同色系及搭配。在展示鞋子的7款颜色时，他们以选色卡作为创意思路，将不同颜色鞋子的产品图制作成一张张卡片来展示，并通过SVG效果来引导用户点击颜色标签，自行选择查看。这种新颖的排版方式，不仅优化了布局设计，还能给用户眼前一亮的感觉，整体创意十足。
此款SVG效果叫做横向无限次点击标签抽出卡片，ID：241。它可以满足用户重复查看的需求，实用性高，除了用在这类主题以外，还可以用来展示人物介绍的内容，或者介绍产品的功能。除了回力品牌有用到此SVG外，商场也使用过该效果。三儿为大家找来了悦汇广场 南海的案例。
（来自悦汇广场 南海公众号）
这个商场使用此效果，放在推文开篇位置，以图片的形式，言简意赅地介绍了商场的春季主题活动，比如服饰、餐饮等，既丰富了文章的表现形式，又让用户对推文整体内容有一个大概的了解。
点击135编辑器页面左侧，选择SVG编辑器进入界面，在【互动效果】中搜索ID：241，找到该效果，点击放入编辑界面。
放置好组件之后，就需要我们为组件添加图片素材，包括背景图和卡片区域的图。
首先我们可以上传背景图。
接着添加卡片区域的图片，在这一部分需要分别传入一组标签图和抽出图，这篇推文中展示了七个不同颜色的产品，意味着就需要传入七组标签图+抽出图。
上传好一组图片后，就可以先为标签图和抽出图调整定位，在X轴和Y轴的位置输入合适的数值即可。
● X轴调整的是标签图和抽出图左右的位置。
● Y轴调整的是标签图和抽出图上下的位置。
在抽出图部分，我们还需要为其设置返回的触发区域，拖拽红色虚线区域即可。
注：设置的返回区域的区域范围不要和标签区域范围重叠，不然效果会失效。
我们还可以调整抽出图的方向是左还是右，一般情况下默认为左侧展示。
点击【添加卡片】，即可继续添加内容，由于其他组标签图和抽出图的设置方式类似，这里就不做过多赘述。
组件全部设置完毕后，就可以选择右上角的【导出】【同步】到公众号后台。
以上就是三儿分享的全部内容了
如果觉得还不错
记得点个赞+在看哦
还有什么想看想学的
欢迎在评论区留言哦
最近我们的
金秋乐购活动开始了
现在下单会员
最高送1年会员/500京东卡
优惠不等人
赶紧扫描下方二维码参加吧
*以上所涉及的素材仅供学习交流使用，侵联删
