公众号svg互动怎么制作？
SVG布局功能，此功能可以做出点击换图、点击空白显示文字/图片、点击直接展开、答题等效果。
在编辑器页面左侧的菜单栏选择【样式】——【布局】——【基础布局】，往下滑动就可以找到SVG布局。
将SVG布局放入编辑区域后，选中它，调出右侧的SVG布局面板，选择【编辑SVG布局】即可进入此功能的界面。
SVG布局界面大致可以分成三个区域，第一个是增加画布区，第二个是效果操作区，第三个是编辑区。
当你想要增加画布时，点击第一个画布旁的【+】号即可。
如果你想要删除画布，跟增加画布是同样的操作，点击右侧此按钮即可删除。
在SVG布局中有两种编辑选择。第一种是编辑文本，第二种是编辑图片。在编辑操作区域的最顶部【内容】处就可以进行选择。
➤ 编辑文本
如果你选择编辑的形式是文本，那就可以在编辑操作区域的【文字内容】框中输入文字，这里需要注意，你输入的文字内容要尽量简短，一般一排文字对应一个文本框，如果你有多排文字内容需要换行，就需要再添加文本框。
输入好文字内容之后，我们可以对文本的位置、颜色、粗细、字号进行调整。
除此之外，我们还能为文本添加动画，这就是实现交互效果的关键所在。这里为大家提供了11种效果，包括淡入、淡出、收缩、展开等。
动画触发：这里有两种选择，一种是点击后触发动效，还有一种是自动播放动效。
背景：为了让文本展示不单调，我们还可以为文本添加背景，有纯色、渐变色等选择。
➤ 编辑图片
当你选择编辑形式是图片时，就选择顶部的【内容】为【图片】。
点击中间区域的【上传图片】即可将图片传上去，一张图片放入一个画布，如果你有多张图片，就开设对应的画布数量。
图片位置调整与文本的位置调整是一样的，需要调整纵向和横向的百分比。
图片区域：这里有两种选择，第一种是包含，它的意思是指如果图片的大小无法铺满整个画布，则展示的时候会留出一定的空白区域。另一种是覆盖，它的意思是指如果图片大小无法铺满整个画布时，则会自动裁剪拉伸该图片，使其铺满整个画布。
动画效果：这里同样为大家放置了11种效果，包括淡入、淡出、展开等。
➤ 编辑图文内容
除了放文本和图片以外，我们还可以在SVG布局中放入编辑好的文章、模板等。一般和展开的动画效果一起使用。
选择【预览/编辑图文】——【编辑图文】即可打开编辑界面。
SVG布局可以做很多种SVG交互效果，由于篇幅有限，这里三儿就用SVG布局做两款效果给大家展示，一个是点击展开效果，另一个是点击换图效果。
效果展示↑
在此效果中三儿主要用到的是长图，接下来三儿就来给各位宝子分享一下操作步骤，带你们实现此效果。
第一步：自然是需要你准备好要用到的图片了。在SVG布局里做点击展开效果与SVG组件相比会更方便，比如如果你做的这一张长图的尺寸在10M内，没超过系统规定的大小，你就不需要切割分成多张图片单独添加，而是直接将整张图放入编辑区域即可。
第二步：选择编辑操作区的内容部分为【图片】。
第三步：选择动画类型为【展开】，点击【编辑图文】按钮，进入界面，在【图片素材】区域上传图片。
第四步：把图片放到编辑区域，选中之后，点击图片面板的【无缝】消除多余的缝隙，接着点击【完成编辑】即可。
第五步：回到SVG布局主页面之后就需要我们调整细节部分，这里需要调到3处细节。
由于刚放入的图片的头图在效果区域不会完整显示，所以我们需要调整【宽高比】以及【宽屏】，【宽屏】的意思是指让此效果的图片占满整个编辑区，如果未勾选的话，两边会出现留白。【宽高比】的调整就是根据你头图的长度来设置。
设置动画时长：数值越小，动效展示速度快，数值越大，动效展示速度慢，大家可以根基自己的需求自由调整。
最后点击完成即可。
效果展示↑
上面所展示的是三儿做得点击换图效果，让模糊的图片变清晰。接下来三儿同样来讲解一下操作步骤。
第一步：首先需要准备两张图片，点击前和点击后的图片。接着在编辑操作区选择内容部分为【图片】。
第二步：先上传点击前的图片，在效果展示区可能最开始不会完整显示图片，所以就需要调整宽高比，将高度的数值进行调整，直至图片完整显示。
接着将动画类型选择【淡出】，动画时长调整为1-2秒。
第三步：复制第一个画布，将原本的图片删除，重新上传点击后的图片，将此画布的动画类型选择【无动画】，动画触发设置为【点击】，点击完成即可。
立即登录
