（来自雀巢集团）

① 首先在编辑器页面左侧选择【SVG编辑器】，进入SVG编辑器之后在【互动效果】中搜索组件ID：360，名称：点击全文渐进式换内容-自定义触发，将其放到编辑页面。

② 我们需要为组件添加图片，即位移小元素、初始背景图、变化后背景图。

在放入位移小元素部分的图片时，要使用透明底的图片，且需要与背景图的宽度保持一致。位移元素部分图片整体的高度可以按元素高度裁切，不要上下留白太多。

③上传完位移小元素后，接着就上传初始背景图和变化后背景图。(这里所有图片需要宽度一致，并且变化前后背景图的总高度需要保持一致）

添加好初始背景图就需要为图片设置触发点击切换的区域，拖拽红色虚线区域，即可改变触发区域的大小和位置。

接着再添加变化后的背景图即可。

④ 全部图片设置完成后，就需要调整组件细节，包括动画渐变时长和元素移入时长，以及新旧内容分隔线位置。

新旧内容分割线是指设置分割线在位移小元素图片高度占比的位置，比如设置为50%，分割线就在小元素图片的中间位置；设置为100%，分割线就在小元素图片底部。

⑤ 整个SVG组件的内容制作好之后，选择右上角的【同步】【导出】就可以导入到公众号后台了。