想在公众号文章中加入炫酷的SVG互动效果，如点击换图、滑动展开或点击播放？一个关键的起点是获取公众号卡片的HTML代码。本文将手把手教你两种获取公众号卡片代码的方法，这是实现后续高级SVG排版效果的基础。无论你是使用专业的SVG编辑器还是手动编辑代码，掌握这一步都至关重要。
效果与应用场景
公众号卡片代码是众多公众号SVG效果的基石。获取这段代码后，你可以将其嵌入到专业的SVG编辑器中，轻松制作出：
- 点击换图效果：用户点击卡片区域，图片瞬间切换。
- 滑动展开效果：用户向上滑动，隐藏内容徐徐展开。
- 点击播放语音/视频：点击卡片即可触发多媒体播放。
这些互动排版效果能极大提升文章的趣味性和转化率，是当前微信排版的流行趋势。
第一步：在公众号后台插入公众号卡片
首先，你需要在微信公众号后台创建一篇包含公众号卡片的文章。
-
打开微信公众号平台，新建一篇图文消息，点击编辑工具栏上方的【公众号】按钮。
-
在弹出的搜索框中，输入你想要插入的公众号名称或其微信号，从搜索结果中选中目标公众号，然后点击【插入】。
-
插入后，完善文章的标题和封面图，然后点击【保存】这篇文章。这一步会生成一个临时的文章预览链接，是后续获取代码的关键。
第二步：获取公众号卡片HTML代码
保存文章后，你有两种方法可以获取公众号卡片的HTML源代码。
方法一：一键获取代码（推荐）
这是最简单快捷的方式，尤其适合不熟悉代码的用户。
-
在图文素材列表页，点击你刚刚保存的文章标题，进入文章的临时预览页面。在浏览器的地址栏中，完整复制该预览页面的网址链接。
-
点击公众号名片素材右侧的【一键获取代码】按钮，将上一步复制的文章链接粘贴到输入框中。
-
点击【开始获取】按钮，系统将自动解析并提取出公众号名片的纯净HTML代码。
方法二：使用浏览器开发者模式获取
如果你习惯手动操作，或者想更深入地了解代码结构，可以使用此方法。
-
同样，进入文章的临时预览页面。在页面空白处点击鼠标右键，选择【检查】(Inspect) 或【审查元素】，调出浏览器的开发者工具面板。
-
在开发者工具面板中，点击左上角的“选择元素”箭头图标，然后将鼠标移动到网页中的公众号卡片区域并点击。此时，右侧的代码窗口会自动定位并高亮显示该卡片对应的HTML代码块。
-
在选中的代码块上方，仔细查找以
mpprofile开头的那个iframe标签代码行。在该行代码上单击右键，选择【Edit as HTML】（或类似编辑选项），然后复制弹出的编辑框内的全部代码即可。
总结与工具推荐
成功获取公众号卡片代码后，你就拥有了制作高级SVG互动效果的“原材料”。你可以将这段代码粘贴到支持HTML编辑的微信编辑器或专业的SVG编辑器中，结合CSS和JavaScript，创造出令人惊艳的点击、滑动等交互效果。
对于大多数希望高效、无代码制作公众号SVG效果的运营者和小编来说，使用一个功能强大的工具能事半功倍。想制作更多酷炫的公众号SVG互动效果，如点击换图、滑动展开、渐变显示等？强烈推荐使用SVG编辑器。作为135编辑器家族的重要成员，这款在线SVG编辑器提供了海量精美的SVG特效模板，覆盖多种互动玩法，全程可视化操作，无需任何代码基础也能轻松制作出专业级的互动推文，极大提升你的微信排版效率和创意表现力。
