




SVG交互排版图文,大部分都是通篇长图,但也有不少小伙伴在制作交互排版时,会有插入文字的需求。
iPaiban Pro 黑科技编辑器不支持直接编辑文字,那 SVG 交互排版,该怎么插入文字呢?
今天给带来3种实用方法,分不同情况,大家可选用合适的方法进行操作。
方法一
使用「图文引用」组件
「图文引用」组件在 iPaiban Pro 黑科技编辑器(SVG.iPaiban.com)中是一个特殊的组件,它可用来引入编辑器的其他草稿内容或第三方的排版内容。
因为 SVG 交互排版的特殊性,我们通常不能直接复制粘贴交互排版的内容,而是通过复制其代码的方式导入到公众号后台。
所以反过来,如果我们要在 iPaiban Pro 编辑器中加入其它草稿或外来的排版内容时,也需要以代码的形式导入过来。这就是「图文引用」组件的用途。
举个例子,下方是两个点击切换图片效果:
如果想要在两个切换效果之间加入几行样式文字,我们可以先在i排版图文编辑器(网址:https://n.ipaiban.com)中编辑好这段文字,然后右上角点击「提取文章代码」。
接着回到 iPaiban Pro 黑科技编辑器,在两个切换效果之间插入一个「图文引用」组件。
然后在右侧指定位置粘贴刚才复制的代码,即可成功导入文字内容。
方法二
使用i排版图文编辑器
i排版图文编辑器(网址:https://n.ipaiban.com)主要用于编辑排版不带SVG交互的普通样式图文内容。它还可以通过导入代码的方式导入SVG排版内容。
所以如果我们的图文普通文字内容居多,只是用到少数SVG排版,就可以先在i排版图文编辑器排好文字内容,然后在 iPaiban Pro 黑科技编辑器(SVG.iPaiban.com)排好SVG内容并生成代码复制,最后粘贴导入到i排版图文编辑器中就可以了。
因为微信的限制,SVG内容导入到i排版图文编辑器中可能像下图一样不显示图片,没有关系,导入到公众号后台就能正常显示了。
方法三
使用 iPaiban Pro 小助手插件
iPaiban Pro 小助手是 iPaiban Pro 黑科技编辑器的辅助工具,主要用来在公众号后台一键提取音频、视频、小程序、公众号和视频号的代码,以及清空图文和导入编辑器生成的图文代码,让排版更高效。
其中导入代码有一个「局部导入」的功能,使用该功能即可将文字内容与SVG内容结合。
我们先在公众号后台新建文章排好文字部分,然后利用小助手插件的「局部导入」功能导入在 iPaiban Pro 编辑器做好的SVG交互排版,这样就反向实现给交互排版插入文字的需求了。
iPaiban Pro 小助手插件安装和详细使用教程见:《iPaiban Pro小助手安装和使用教程》
之前还给大家讲过「淘口令-图片」组件用法,如果想在SVG图文的图片上添加少量文字的话,可以使用「淘口令-图片」组件,教程见:《教你一招在图片上放淘口令,横的竖的都行!》
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。





































SVG交互排版图文,大部分都是通篇长图,但也有不少小伙伴在制作交互排版时,会有插入文字的需求。
iPaiban Pro 黑科技编辑器不支持直接编辑文字,那 SVG 交互排版,该怎么插入文字呢?
今天给带来3种实用方法,分不同情况,大家可选用合适的方法进行操作。
方法一
使用「图文引用」组件
「图文引用」组件在 iPaiban Pro 黑科技编辑器(SVG.iPaiban.com)中是一个特殊的组件,它可用来引入编辑器的其他草稿内容或第三方的排版内容。
因为 SVG 交互排版的特殊性,我们通常不能直接复制粘贴交互排版的内容,而是通过复制其代码的方式导入到公众号后台。
所以反过来,如果我们要在 iPaiban Pro 编辑器中加入其它草稿或外来的排版内容时,也需要以代码的形式导入过来。这就是「图文引用」组件的用途。
举个例子,下方是两个点击切换图片效果:
如果想要在两个切换效果之间加入几行样式文字,我们可以先在i排版图文编辑器(网址:https://n.ipaiban.com)中编辑好这段文字,然后右上角点击「提取文章代码」。
接着回到 iPaiban Pro 黑科技编辑器,在两个切换效果之间插入一个「图文引用」组件。
然后在右侧指定位置粘贴刚才复制的代码,即可成功导入文字内容。
方法二
使用i排版图文编辑器
i排版图文编辑器(网址:https://n.ipaiban.com)主要用于编辑排版不带SVG交互的普通样式图文内容。它还可以通过导入代码的方式导入SVG排版内容。
所以如果我们的图文普通文字内容居多,只是用到少数SVG排版,就可以先在i排版图文编辑器排好文字内容,然后在 iPaiban Pro 黑科技编辑器(SVG.iPaiban.com)排好SVG内容并生成代码复制,最后粘贴导入到i排版图文编辑器中就可以了。
因为微信的限制,SVG内容导入到i排版图文编辑器中可能像下图一样不显示图片,没有关系,导入到公众号后台就能正常显示了。
方法三
使用 iPaiban Pro 小助手插件
iPaiban Pro 小助手是 iPaiban Pro 黑科技编辑器的辅助工具,主要用来在公众号后台一键提取音频、视频、小程序、公众号和视频号的代码,以及清空图文和导入编辑器生成的图文代码,让排版更高效。
其中导入代码有一个「局部导入」的功能,使用该功能即可将文字内容与SVG内容结合。
我们先在公众号后台新建文章排好文字部分,然后利用小助手插件的「局部导入」功能导入在 iPaiban Pro 编辑器做好的SVG交互排版,这样就反向实现给交互排版插入文字的需求了。
iPaiban Pro 小助手插件安装和详细使用教程见:《iPaiban Pro小助手安装和使用教程》
之前还给大家讲过「淘口令-图片」组件用法,如果想在SVG图文的图片上添加少量文字的话,可以使用「淘口令-图片」组件,教程见:《教你一招在图片上放淘口令,横的竖的都行!》
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。






































小黄人科技@2025 | 服务协议